分三个组件 一个父组件 两个子组件 两个子组件进行通信
父组件分别引入 两个子组件
三个组件分别为: 父组件 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;
})
}