vue.js非父子组件之间的数据传递

Author Avatar
幽浮404 2018年09月05日
  • 在其它设备中阅读本文章

非父子组件可以由一个独立的空模板来充当消息传递的中间件.
首先我们新建一个空模板 eventBus.js

//bus.js
import Vue from 'vue'
export default new Vue()

其次在需要传递数据的模版中的事件中触发自定义事件并传值
先引用

import bus from '../assets/eventBus.js'

然后写在事件中触发自定义事件

bus.$emit("val",data);

在需要接收数据的模版中的 mounted 中创建监听, 同样要引用 eventBus.js

mounted: function() {
bus.$on(
  "val",
  function(msg) {
    this.tabs.push(msg);
    console.log(this.tabs);
  }.bind(this)
);

},
最后在共同父组件中引用模版并写上标签.