幽浮404

vue.js非父子组件之间的数据传递
非父子组件可以由一个独立的空模板来充当消息传递的中间件.首先我们新建一个空模板eventBus.js//bus.j...
扫描右侧二维码阅读全文
05
2018/09

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

非父子组件可以由一个独立的空模板来充当消息传递的中间件.
首先我们新建一个空模板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)
);

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

Last modification:September 13th, 2018 at 04:11 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment