Vue组件通信

父组件传递参数给子组件

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

思路

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

子组件：Child.vue

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

props: {
name: {type: String, required: true, default:xxx},
}

父组件：Father.vue

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

<my-component name='yk' :age='3' :set-name='setName'></my-component>

子组件传递参数给父组件

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

思路

• 子：子组件标签上绑定@click = '回调函数'，在回调函数中使用（事件触发$emit）this.$emit('自定义事件名称p', 数据) 
• 父：（事件监听$on ）v-on：p=‘回调函数’ ， 在 methods: { 回调函数() { //逻辑处理 } }

子组件：child.vue

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

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

父组件：father.vue

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

EventBus事件总线 .$emit .$on

局部引用

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

思路

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

中转站文件

定义一个event-bus.js

import Vue from 'vue'
const bus = new Vue()
export default bus

child1.vue

child2.vue

总结

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

全局引用

全局事件总线只不过是一个简单的 vue 组件，将Eventbus（Vue实例）挂载到Vue.prototype原型对象的属性$bus上。

注意区分:Vue.use是用来注册插件的，如注册Vuex，Vue.use(new Vuex.store({...../5个基本属性}))，使用方法为:this.$store.state.xxx

代码如下：

var EventBus = new Vue();

Object.defineProperties(Vue.prototype, {
    $bus: {
        get: function () {
            return EventBus
        }
    }
})
复制代码

现在，这个特定的总线使用两个方法 $on 和 $emit 。一个用于创建发出的事件，它就是$emit ；另一个用于订阅 $on ：

var EventBus = new Vue()....省略/;//挂载到原型对象上

父组件.vue
this.$bus.$emit('nameOfEvent','信息:123');

子组件.vue
this.$bus.$on('nameOfEvent',(val) => {
   console.log(val) // 信息:123
})

参考：

https://juejin.cn/post/7034824221377167374#heading-13

https://juejin.cn/post/6965062549771386887#heading-6