vue 中的非父子间的通信

方法有二  

一 在main.js中 创建一个vue的实例 在window下挂载 

window. bus = new Vue()

然后在 需要传递的数据的组件中 我这里是在home组件里面 向其他地方进行传值 在methods里面进行

handleNodeClick( data) {

alert( data. id)

bus. $emit( 'change', data) //data 为需要传入的值

},

然后在 其他组件中进行接收 注意接收的时候需要在 钩子函数 created 进行接收

created() {

this. getTroubles()

this. getTree()

//通过bus进组件之间的数据传递

bus. $on( 'change', ( msg) => { // 这里msg是形参 怎么写都可以

// this.msg = 'hhh'

this. unitName = msg. name

})

},

方法二 新建一个js文件 我这边是建在 common文件夹里面

bus。js里面

import Vue from 'vue';

export default new Vue();

 然后在需要用到的组件中进行引用 传入 接收的组件中都需要引用

import bus from './../common/js/bus.js'

export default {

data() {

return {

sysName: "",

后面的操作 同方法一

还有一种就是vuex 这里就不多介绍了 这种适合大量数据 和复杂的通信使用 比如说购物车部分