這篇文章將為大家詳細(xì)講解有關(guān)vue2.0非父子組件間如何進(jìn)行通訊，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司一直秉承“誠信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！為您提供成都網(wǎng)站建設(shè)、網(wǎng)站制作、成都網(wǎng)頁設(shè)計(jì)、重慶小程序開發(fā)、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、成都APP應(yīng)用開發(fā)是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計(jì)公司，等你一起來見證！

在vue中，父組件向之組件通訊使用的是props，子組件向父組件通訊使用的是$emit+事件，那非父子間的通訊呢，在官方文檔上只有寥寥數(shù)筆，

概念很模糊，這個(gè)空的vue實(shí)例應(yīng)該放在哪里呢，光放文檔并沒有明確的描述，經(jīng)過查證一些其他的資料，發(fā)現(xiàn)其實(shí)這個(gè)非父子間的通訊是這么用的：

首先，這個(gè)空的實(shí)例需要放到根組件下，所有的子組件都能調(diào)用，即放在main.js下面，如圖所示：

import Vue from 'vue'
import App from './App'
import router from './router'


Vue.config.productionTip = false;


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  data:{
    Hub:new Vue()
  },
  template: '',
  components: { App }
});

我的兩個(gè)組件分別叫做child1.vue,child2.vue，我現(xiàn)在想點(diǎn)擊child1.vue里面的按鈕來改變child2.vue里面的數(shù)值，這個(gè)時(shí)候我們需要借助一個(gè)$root的工具來實(shí)現(xiàn)：

child1.vue:

  p this is child
    span(@click="correspond") 點(diǎn)擊進(jìn)行非組件之間的通信

child2.vue:

  p this is child2
    span {{message}}

此時(shí)就已經(jīng)可以達(dá)到我們想要的效果啦。

關(guān)于vue2.0非父子組件間如何進(jìn)行通訊就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。