前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。

<div id="app"><c1></c1><c2></c2>
</div>

var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.js
Vue.component('c1',{ //这里已全局组件为例，同样，单文件组件和局部组件也同样适用
template:'<div>{{msg}}</div>',data: () => ({msg: 'Hello World!'}),created() {Bus.$on('setMsg', content => { this.msg = content;});}
});
Vue.component('c2',{template: '<button @click="sendEvent">Say Hi</button>',methods: {sendEvent() {Bus.$emit('setMsg', 'Hi Vue!');}}
});
var app= new Vue({el:'#app'
})

在实际运用中，一般将Bus抽离出来:

Bus.js

import Vue from 'vue'
const Bus = new Vue()
export default Bus

组件调用时先引入

组件1

import Bus from './Bus'export default {data() {return {.........}},methods: {....Bus.$emit('log', 120)},} 

 

组件2

import Bus from './Bus'export default {data() {return {.........}},mounted () {Bus.$on('log', content => { console.log(content)});    }    
} 

但这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信

 实际运用二（推荐）：

当然也可以直接将Bus注入到Vue根对象中，

import Vue from 'vue'
const Bus = new Vue()var app= new Vue({el:'#app',data:{Bus}　　})

在子组件中通过this.$root.Bus.$on(),this.$root.Bus.$emit()来调用

 

转自：https://www.cnblogs.com/fanlinqiang/p/7756566.html