最近在研究vue.js，總體來說還算可以，但是在web開發(fā)群里有一些人問在單文件組件開發(fā)模式中非父子組件如何傳值的問題，今天在這里講講，希望對大家有所幫助！

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供蒸湘企業(yè)網(wǎng)站建設,專注與網(wǎng)站建設、成都網(wǎng)站設計、H5高端網(wǎng)站建設、小程序制作等業(yè)務。10年已為蒸湘眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡公司優(yōu)惠進行中。

在官網(wǎng)api中的這段講解很少，也很模糊；官網(wǎng)中說明如下：

非父子組件通信：

有時候兩個組件也需要通信 (非父子關系)。在簡單的場景下，可以使用一個空的 Vue 實例作為中央事件總線：

var bus = new Vue()；
// 觸發(fā)組件 A 中的事件
bus.$emit('id-selected', 1)
// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件
bus.$on('id-selected', function (id) {
 // ...
})

那么這一段在單文件組件開發(fā)模式中具體怎么用呢？

首先在main.js中加入data,如下：

new Vue({
 el: '#app',
 router,
 template: '',
 components: { App },
 data:{
 bus:new Vue()
 }
})

如何獲取到這個空的vue對象 bus呢.在組件里面直接調用這個this.$root

然后在另一個組件內調用on事件接收,當然在組件銷毀時解除綁定,使用on事件接收,當然在組件銷毀時解除綁定,使用off方法

然后點擊的時候就能傳遞值了，還等什么，快來試試吧！

以上這篇vue.js單文件組件中非父子組件的傳值實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。