Vue组件通信

前言

Vue组件之间的通信 其实是一种非常常见的场景 不管是业务逻辑还是前段面试中都是非常频繁出现的 这篇文章将会逐一讲解各个传值的方式 不过在此之前 先来总结一下各个传值方式吧

  • 1.父组件向子组件传值 => props
  • 2.子组件向父组件传值 => $emit
  • 3.平级组件传值 => 总线机制 event-bus
  • 4.Vuex

父组件向子组件传值

举个? 你在项目中定义了一个公共组件Header 这个Header里需要根据具体的业务场景去展示不同的title 那这个时候就是一个非常常见的父组件向子组件传值的业务场景了

下面 一起来看一下代码 首先 定义一个公用的Header组件 这个组件里也没有什么复杂的逻辑 就是用props接受一个父组件传递过来的title 并且渲染到页面上

<template><!-- 通用导航栏 --><div class="head-title">{{title}}</div>
</template><script>
export default {name: 'Header',props: {title: String}
}  
</script>
复制代码

父组件其实也是啥都没有 也就是引入Header组件 并且向子组件传递一个title的值 子组件利用props接收到这个值 并且渲染在页面上

<template><div class="container"><Header :title="title" /></div>
</template><script>
import Header from "components/header/header";
export default {name: "Home",data() {return {title: "首页"}},components: {Header}
}
</script>
复制代码

这样就完成了一个最简单最基础的父组件向子组件传值的过程 不过呢 这个props Vue其实也是支持许多拓展的了 *

  • 例如开发者可以通过 defalut 去定义一个默认值 当没有接受到父组件传递过来的值的时候 可以展示这个默认值
  • type 给props指定一个类型 当类型不符合预期的时候 会在控制台上报错
  • 当默认的校验规则都无法满足要求的时候 props也支持自定义一个validator 只需要在props里传递一个validator函数即可
props: {title: {validator: function () {// do somethings}}
}
复制代码

子组件向父组件传值

说到子组件向父组件传值之前 需要解释一个名词 单项数据流 也就是 子组件不能随意更改父组件传递过来的值 以免造成一些数据污染之类的情况 推荐的做法是 如果子组件想要更改一个值 应该是通知父组件 让父组件进行更改

话不多说 还是继续缕一缕思路 然后写代码 首先 需要在子组件里定义一个事件 例如点击事件 通过点击向父组件派发一个事件同时可以在事件里携带需要向外传递的值 同时父组件监听到了这个事件 并且在事件里处理对应的逻辑

<template><!-- 通用导航栏 --><div class="head-title" @click="toParent">{{title}}</div>
</template><script>
export default {name: 'Header',props: {title: String},methods: {toParent () {// 第一个参数 需要父组件监听的时间 第二个参数 向外传递的值this.$emit('getMsg','这是传递给父组件的值')}}
}  
</script>
复制代码

这个时候 子组件已经通过$emit向外传递了一个事件 那么接下去就是在父组件里去监听这个事件 并且处理对应逻辑

<template><div class="container"><Header :title="title" @getMsg="getMsg" /></div>
</template><script>
import Header from "components/header/header";
export default {name: "Home",data() {return {title: "首页",msg: ''}},components: {Header},methods: {getMsg(msg) {console.log(this.msg)this.msg = msgconsole.log(this.msg)}}
}
</script>
复制代码

这样通过$emit就可以成功获取从子组件传递过来的值 并且父组件可以更改这个值 从而实现一些对应的业务逻辑

平级组件之间传值

两个没什么关系的组件之间有时候也是会需要传递一些值 例如页面A要传递值给页面B B接受这个值并且渲染在页面上

下面来说一下实现思路

  • 1.创建一个js文件 在文件中新建一个vue的实例 并且在实例上新建一个EventBus 或者在vue的属性上挂载一个envent-bus 这样通过属性的方式创建的event-bus是一个全局的属性
  • 2.在需要使用event-bus的组件里引入 bus并且利用$emit向外触发事件
  • 3.在需要接受值的组件里利用$on来接受值

新建一个.js文件 并且创建event-bus

import Vue from 'vue'
export const EventBus = new Vue()
复制代码

利用enent-bus向外触发事件

<template><button @click="handleClick">-</button>
</template><script> import { EventBus } from "../event-bus.js";export default {name: "Count",data () {return {num: 1,}},methods: {decrease() {EventBus.$emit("getNum", {num:this.num,})}}}
</script>
复制代码

监听事件

 EventBus.$on("getNum", (num) => {console.log(num)})复制代码

这样就通过event-bus成功将页面A的值传递给了页面B的值 写起来的感觉 其实还是和子组件向父组件传值的过程非常相似

下面还会提到Vuex传值 不过感觉可以新开一个文章..所以..下次再见啦 ??

转载于:https://juejin.im/post/5cfb67166fb9a07ec956000e

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/536408.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【动态规划】0/1背包问题

问题 H: 【动态规划】0/1背包问题 时间限制: 1 Sec 内存限制: 64 MB 提交: 152 解决: 95 [提交] [状态] [讨论版] [命题人:admin] 题目描述 张琪曼和李旭琳有一个最多能用m公斤的背包&#xff0c;有n块魔法石&#xff0c;它们的重量分别是W1&#xff0c;W2&#xff0c;…&a…

猫哥教你写爬虫 005--数据类型转换-小作业

小作业 程序员的一人饮酒醉 请运用所给变量&#xff0c;使用**str()**函数打印两句话。 第一句话&#xff1a;1人我编程累, 碎掉的节操满地堆 第二句话&#xff1a;2眼是bug相随, 我只求今日能早归 number1 1 number2 2 unit1 人 unit2 眼 line1 我编程累 line2 是bug相…

索引失效

转载于:https://blog.51cto.com/11009785/2406488

棋盘问题【深搜】

棋盘问题 POJ - 1321 在一个给定形状的棋盘&#xff08;形状可能是不规则的&#xff09;上面摆放棋子&#xff0c;棋子没有区别。要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列&#xff0c;请编程求解对于给定形状和大小的棋盘&#xff0c;摆放k个棋子的所有可行…

python isinstance()

isinstanceisinstance(object, classinfo) 判断实例是否是这个类或者object是变量 classinfo 是类型(tuple,dict,int,float) 判断变量是否是这个类型 举例&#xff1a; class objA: pass A objA() B a,v C a string print isinstance(A, objA) #注意该用法 print isinst…

P1303 A*B Problem 高精度乘法

复习了一下高精乘 #include<bits/stdc.h> using namespace std; const int maxn1e67; char a1[maxn],b1[maxn]; int a[maxn],b[maxn],c[maxn*10],lena,lenb,lenc,x; int main() {scanf("%s",a1);scanf("%s",b1);lenastrlen(a1);lenbstrlen(b1);for(i…

Catch That Cow【广搜】

Catch That Cow POJ - 3278 Farmer John has been informed of the location of a fugitive cow and wants to catch her immediately. He starts at a point N (0 ≤ N ≤ 100,000) on a number line and the cow is at a point K (0 ≤ K ≤ 100,000) on the same number l…

Go2Shell 已无法使用

在更新 Mac 系统时提醒了这个, 像我一样对 Go2Shell 中毒的人来说, 这是无法忍受的。貌似 Go2Shell 没有升级&#xff0c;没有办法&#xff0c;就直接找来了一个替代品。cd to, 下载入口如下&#xff1a;目前感觉良好。 转载于:https://juejin.im/post/5cfe82e15188252b1b0366e…

Fliptile【搜索】

Fliptile POJ - 3279 Farmer John knows that an intellectually satisfied cow is a happy cow who will give more milk. He has arranged a brainy activity for cows in which they manipulate an M N grid (1 ≤ M ≤ 15; 1 ≤ N ≤ 15) of square tiles, each of which…

JS异步开发总结

1 前言 众所周知&#xff0c;JS语言是单线程的。在实际开发过程中都会面临一个问题&#xff0c;就是同步操作会阻塞整个页面乃至整个浏览器的运行&#xff0c;只有在同步操作完成之后才能继续进行其他处理&#xff0c;这种同步等待的用户体验极差。所以JS中引入了异步编程&…

迷宫问题【广搜】

迷宫问题 POJ - 3984 定义一个二维数组&#xff1a; int maze[5][5] {0, 1, 0, 0, 0,0, 1, 0, 1, 0,0, 0, 0, 0, 0,0, 1, 1, 1, 0,0, 0, 0, 1, 0,}; 它表示一个迷宫&#xff0c;其中的1表示墙壁&#xff0c;0表示可以走的路&#xff0c;只能横着走或竖着走&#xff0c;不能…

大虾对51单片机入门的经验总结

回想起当初学习AT89S52的日子还近在眼前:毕业后的第一年呆在亲戚公司做了10个月设备管理.乏味的工作和繁杂的琐事让我郁闷不已.思考很久后终于辞职.投奔我的同学去了,开始并不曾想到要进入工控行业,知识想找一份电子类技术职业,至于什么职业我根本没有目标可言.经过两个多月的挫…

mac安装cnpm

1.先安装node node的下载地址&#xff1a;http://nodejs.cn/download/ 这个没什么好说的&#xff0c;安装完成后测试一下&#xff0c;在终端输入&#xff1a;node -v 这时候就可以看到安装的node版本号&#xff0c;再输入&#xff1a;npm -v 这时候就会看到npm的版本号了 2.用n…

A计划【广搜】

A计划 HDU - 2102 可怜的公主在一次次被魔王掳走一次次被骑士们救回来之后&#xff0c;而今&#xff0c;不幸的她再一次面临生命的考验。魔王已经发出消息说将在T时刻吃掉公主&#xff0c;因为他听信谣言说吃公主的肉也能长生不老。年迈的国王正是心急如焚&#xff0c;告招天…

WordPress忘记密码的5种解决方法

为什么80%的码农都做不了架构师&#xff1f;>>> 无意中忘记wordpress的密码了&#xff0c;恰巧在后台又没来得及设置邮件&#xff0c;只好四处苦寻解决办法&#xff0c;还好总算找到了…… 1. WordPress内置的找加密码方法 如果你的admin帐户的电子邮件地址是正确的…

记录一次,事务遇到消息发送,疏忽给自己挖坑

场景&#xff1a;一个异步重算功能&#xff08;任务新建后发送消息到RocketMq&#xff09;&#xff0c;每次重算单条记录的时候&#xff0c;可以计算正确&#xff0c;但是当多条记录批量重算时&#xff0c;结果总是莫名其妙的不对。排查了很久&#xff0c;终于找到原因 原因&am…

在linux上执行.net Console apps

为什么80%的码农都做不了架构师&#xff1f;>>> 有个程序&#xff0c;在.net下写了半天&#xff0c;总算跑起来了&#xff0c;发现有个问题&#xff0c;在windows上不好弄&#xff0c;而同事前一段时间已经有Linux下的解决方法了&#xff0c;于是想直接将.net程序放…

Android4.0设置界面修改总结

为什么80%的码农都做不了架构师&#xff1f;>>> 笔者前段时间完成设置的圆角item风格的修改&#xff0c;但最近&#xff0c;客户新增需求&#xff0c;想把设置做成Tab风格的&#xff0c;没办法&#xff0c;顾客就是上帝&#xff0c;咱得改啊。今天算是初步改完了&a…

敌兵布阵【线段树】

敌兵布阵 HDU - 1166 C国的死对头A国这段时间正在进行军事演习&#xff0c;所以C国间谍头子Derek和他手下Tidy又开始忙乎了。A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况。由于采取了某种先进的监测手段&#xff0c;所以每个工兵…

Android之仿网易V3.5新特性

为什么80%的码农都做不了架构师&#xff1f;>>> 最近&#xff0c;网易新闻更新到V3.5了&#xff0c;给我印象最深的是第一次进应用时显示新特性的ViewPager变成垂直滑动了。于是&#xff0c;小小的模仿了一下&#xff0c;我们来看看效果&#xff1a; 本文源码下载地…