前言
vue官网指出: 通过使用事件中心,允许组件自由交流,无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口,你可以通过实例化一个空的 Vue 实例来实现这个目的。
也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的),才能使用 $emit 获取 $on 的数据参数,实现组件通信
创建一个公共实例文件bus.js
#bus.js作为中央数据总线 import Vue from "vue"; export default new Vue();
组件 foo.vue
#foo.vue import Bus from '../bus.js'; export default { name: 'foo',data () { return { foo: 'Foo component',msg: 'this is foo data' } },mounted:function(){ var _this=this; Bus.$on('add',function(msg){//监听bar组件的add事件 _this.msg = msg ; console.log(_this.msg); }); } }
3.组件 bar.vue
#bar.vue import Bus from '../bus.js'; export default { name: 'bar',data () { return { bar: 'Bar component',msg: 'this is bar data' } },methods:{ add(){// 定义add方法,并将msg通过add传给foo组件 Bus.$emit('add',this.msg); this.msg=''; } } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。