vue系列 — 父传子，子传父，兄弟组件通信

父传子（父通过import + component写入子组件，然后v-bind绑定数据，子通过props接收）

思路

• 父：自定义属性名 + 数据（要传递）=> v-bind:value=”数据”
• 子：props [“父组件上的自定义属性名“] => 进行数据接收

子组件：child.vue

要点：

• props 数组里面是父组件上的自定义属性名
• 在 template 里面进行数据接收

父组件：father.vue

要点：

• 引入 child.vue 文件，并为其创建一个变量
• 在 components 里面写出这个变量
• 在 template 里面需要注册子组件

保存修改的文件，查看浏览器

我们可以对 message 的值进行 v-bind 动态绑定

此时浏览器中

总结

• 子组件在props中创建一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 把需要传给子组件的值赋给该属性

子传父（子click设置点击事件，$emit设置通道后传参，父在methods接收）

思路

• 子：this.$emit(‘自定义事件名称’, 数据) 子组件标签上绑定@自定义事件名称 = ‘回调函数’
• 父：methods: { 回调函数() { //逻辑处理 } }

子组件：child.vue

1. 在子组件中创建一个按钮，给按钮绑定一个点击事件

2. 在响应该点击事件的函数中使用 $emit 来触发一个自定义事件，并传递一个参数

父组件：father.vue

3. 在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

4. 保存修改的文件，在浏览器中点击按钮

总结

• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
• 在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

兄弟组件（兄click设置点击事件，用$emit设置通道传参给中转站，弟通过$on接收来自中转站的参数）

思路

• 通过中转站 let bus = new Vue（）
• A：methods :{ 函数{bus.$emit(‘自定义事件名’，数据)}  发送
• B：created （）{bus.$on(‘A发送过来的自定义事件名’，函数)}  进行数据接受

中转站文件

创建 bus.js 做为中转站文件

bus.js 内容为

child1.vue

child2.vue

总结

• 兄组件通过click设置点击事件
• 兄组件通过$emit设置通道传参给中转站
• 弟组件通过$on接收来自中转站的参数

参考文章

• 【vue组件之间互相传值：父传子，子传父】
• Vue 父传子，子传父，兄弟组件通信的使用