vue2.0 非父子组件之间的单一事件通信

前言
vue官网指出： 通过使用事件中心，允许组件自由交流，无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 Vue 实例来实现这个目的。

也就是说 非父子组件之间的通信，必须要有公共的实例（可以是空的），才能使用 $emit 获取 $on 的数据参数，实现组件通信

1. 创建一个公共实例文件bus.js

#bus.js作为中央数据总线

import Vue from "vue";
export default new Vue();

1. 组件 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='';
    }
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!