vue非父子组件通信传值(任意组件)
创建global-bus.js文件 (呼叫中心,通信中心)
导入vue
import Vue feom 'vue'
export default new Vue()
从a传到b
b注册 a发布
b 导入 globalBus
import globalBus from 'xxxxx'
在vue的钩子生命周期函数初始化 代码如下:
globalBus.$on('事件名称', (data 声明对象接收a传过来的值) =>{ 处理函数 })
比如:
this.user.name = data.name
this.user.photo = data.photo
a 导入 globalBus
import globalBus from 'xxxxx'
在需要发布的地方$emit
globalBus.$emit('事件名称', 要传的值)
比如:
globalBus.$emit('事件名称', this.user)
反之同理
注意
:
- $on 注册(收) $emit 发布(传)
- 组件两端的事件名称必须一致
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。