Vue 传值方式——EventBus

分三个组件 一个父组件 两个子组件 两个子组件进行通信

父组件分别引入 两个子组件

三个组件分别为： 父组件 father、 组件 Send 、子组件 Appect

1、components 文件 创建 evnetBus.js 文件 

import bus from ‘vue’  // 引入 vue 实例

export default new Vue();  // 导出 Vue 实例

2、在 Send 组件：

模板：

<button @click="send"></button>  // 点击按钮 把Send 组件的数据 发送 appect 组件数据

逻辑：

import bus from '@/componets/eventBus.js' // 引入 bus 实例

data() {

        return { msg: '沉香如屑'} // 要传送的数据

}，

methods: {

        send() {

                bus.$emit('sendValue',this.msg) // 通过点击按钮 触发send事件 在通过 bus.$emit 触发 sendValue 事 并将数据传送过去

        }

}

3、在 appect 组件

模板：

<div>{{ value }} </div> 

逻辑：

import bus from ‘@/componets/eventBus.js’ // 导入 bus 实例

data() {

        return { value：‘ ’} // 定义接受过来的数据变量

}

created() {

        bus.$on('sendValue',(val) => { // 通过 bus.$on() 方法 接受 传递 过来数据 并进行赋值

                this.value = val;

        })

}