2、$emit/$on
eventBus事件总线
描述：
这个方法是通过创建一个空的 vue 实例，当做 $emit 事件的处理中心（事件总线），通过他来触发以及监听事件，方便的实现了任意组件间的通信，包含父子，兄弟，隔代组件。
以下图为例，我们要实现的是A组件和C组件向B组件传输数据。
使用方法：
<!--home.vue--> <template> <div> <div>我是父元素，我的num的值是：{{num}}</div> <a-comp :event="bus" :num.sync='num'></a-comp> <c-comp :event="bus" :num='num'></c-comp> <b-comp :event="bus"></b-comp> </div> </template> <script> import Vue from 'vue'; import aComp from './a.vue'; import bComp from './b.vue'; import cComp from './c.vue'; // 创建一个空的vue实例 const bus = new Vue(); export default { 'name': 'example', data() { return { bus, 'num': 1 }; }, 'components': { aComp, bComp, cComp } }; </script>
<!--a.vue--> <template> <div class="a-content"> 我是组件A， <el-button type="primary" @click="send">点击我向B发送东西</el-button> </div> </template> <script> export default { 'name': 'aComp', 'props': [ 'event', 'num' ], data() { return {'nb': 0}; }, created() { this.nb = this.num; }, 'methods': { send() { this.nb = this.nb + 1; this.$emit('update:num', this.nb); // 通过$emit 来触发phone-a事件 this.event.$emit('phone-a', '我是组件A啊', this.nb); } } }; </script>
<!--c.vue--> <template> <div> 我是组件C， <el-button type="primary" @click="send">点击我向B发送东西</el-button> </div> </template> <script> export default { 'name': 'cComp', 'props': [ 'event', 'num' ], data() { return {}; }, 'methods': { send() { console.log(this.num); this.event.$emit('phone-c', `我是组件C啊${this.num}`); } } }; </script>
<!--b.vue--> <template> <div class="b-content"> <div>我是组件B，我会接收组件A及组件C</div> <div> A: {{a}} </div> <div> B: {{c}} </div> </div> </template> <script> export default { 'name': 'bComp', data() { return { 'a': '', 'c': '' }; }, 'props': ['event'], mounted() { // 通过$on来监听 phone-a 、phone-c 事件 this.event.$on('phone-a', (a, num) => { this.a = `${a},我在改变父元素传过来的值num: ${num}`; }); this.event.$on('phone-c', c => { this.c = c; }); } }; </script>
其中最重要的是他们必须要在公共的实例中才能实现数据的互相传递。
