前些天發(fā)現(xiàn)了一個巨牛的人工智能學(xué)習(xí)網(wǎng)站，通俗易懂，風(fēng)趣幽默，忍不住分享一下給大家。點擊跳轉(zhuǎn)到教程。

有時候兩個組件也需要通信（非父子關(guān)系）。當(dāng)然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 組件調(diào)用時先引入

組件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)}); } }

但這種引入方式，經(jīng)過webpack打包后可能會出現(xiàn)Bus局部作用域的情況，即引用的是兩個不同的Bus，導(dǎo)致不能正常通信

?實際運用二（推薦）：

當(dāng)然也可以直接將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()來調(diào)用

?

轉(zhuǎn)自：https://www.cnblogs.com/fanlinqiang/p/7756566.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的vue Bus 总线 组件间通信的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。