中间方(必须文件):eventBus.js
// eventBus.js(文件)
import Vue from 'vue'
//向外共享 Vue 的实例对象
export default new Vue()
组件a(发送方):
// 兄弟组件a(数据发送方)
import bus from './eventBus.js'
export default {
data(){
return {
// 需要传递给兄弟组件的值
msg:'hello'
}
},
methods:{
sendMsg(){
// 通过$emit()触发自定义事件
// 参数1:自己定义的事件名,供父组件使用
// 参数2:需要传递的参数
bus.$emit('share',this.msg)
}
}
}
组件b(接收方):
//兄弟组件b(数据接收方)
import bus from './eventBus.js'
export default {
data(){
return {
// 接收兄弟组件a传递过来的值
msgFromLeft:''
}
},
created(){
// 获取子组件传递过来的数据
// 参数val: 与this.count对应(性递组件a中$emit'参数2'对应)
bus.$on('share',val => {
// 赋值
this.msgFromLeft = val
})
}
}
EventBus的使用步骤:
①创建 eventBus.js模块,并向外共享一个 Vue的实例对象。
②在数据发送方,调用 bus.$emit('事件名称',要发送的数据)方法触发自定义事件。
③在数据接收方,调用 bus.$on('事件名称',事件处理函数)方法注册一个自定义事件。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)