非父子、子與子組件之間傳值是指，沒(méi)有上下級(jí)關(guān)系或平級(jí)關(guān)系的組件之間的通訊傳值。
下面先看一下Vue官方的介紹：
第一眼看個(gè)人的感覺(jué)是懵，第二眼還是懵，在其他網(wǎng)友那里找到了比較好理解的 http://www.lxweimin.com/p/8e705bb0bb4b 原文請(qǐng)前往此網(wǎng)址，最下面有介紹。
接下來(lái)我就說(shuō)一下我自己寫(xiě)的：
組件結(jié)構(gòu)：
在組件結(jié)構(gòu)分別是：根組件、父組件、子組件，子組件需要兩個(gè)
這里根組件我們不用App.vue組件，我們暫時(shí)創(chuàng)建一個(gè)叫 index.vue 的根組件；
界面展示：
界面布局分三層：根組件（灰色區(qū)）、父組件（橘黃區(qū)），子組件（白色區(qū)）。
根組件（灰色區(qū)）：標(biāo)題、接收傳值的標(biāo)簽
父組件（橘黃區(qū)）：標(biāo)題
子組件（白色區(qū)）：標(biāo)題、按鈕、接收傳值的標(biāo)簽。其中 a1 界面多一個(gè) 接收傳值的標(biāo)簽
對(duì)了，還有就是 index.vue 和 AA.vue 組件是使用了路由加載界面的
路由加載組件：
父組件里加載子組件：
AA.vue 組件中a1.vue 和 b1.vue的組件沒(méi)有使用路由
我們先寫(xiě)這些組件，并展示。
如果你按照我這個(gè)寫(xiě)法，一定要走通程序，然后在寫(xiě)下面代碼。切記！
我先把找的參考給大家復(fù)制出來(lái)；
網(wǎng)址：http://www.lxweimin.com/p/8e705bb0bb4b
代碼：
根組件（this.$root）
new Vue({
el: '#app',
router,
render: h => h(App),
data: {
// 空的實(shí)例放到根組件下，所有的子組件都能調(diào)用
Bus: new Vue()
}
})
子組件 - bb 組件內(nèi)調(diào)用事件觸發(fā)：
<button @click="submit">提交<button>
methods: {
submit() {
// 事件名字自定義，用不同的名字區(qū)別事件
this.$root.$emit('eventName', 123)
}
}
子組件 - aa 組件內(nèi)調(diào)用事件接收
// 當(dāng)前實(shí)例創(chuàng)建完成就監(jiān)聽(tīng)這個(gè)事件
created(){
this.$root.$on('eventName', value => {
this.print(value)
})
},
methods: {
print(value) {
console.log(value)
}
},
// 在組件銷(xiāo)毀時(shí)別忘了解除事件綁定
beforeDestroy() {
this.$root.Bus.$off('eventName')
},
這是他剝離出來(lái)的代碼，他自己實(shí)踐的代碼，我就不多寫(xiě)了，有興趣可以去上面網(wǎng)站里看看。
下面就是我自己代碼的實(shí)踐
1、App.vue 組件
首先，我們要在 App.vue 組件中聲明一個(gè) Bus 屬性，在這里我要先說(shuō)明一下，上面我說(shuō)的 index.vue 是根組件，其實(shí)這個(gè)一個(gè)假的根組件，真的根組件是 App.vue 組件，我是為了方便展示效果才這樣的。
在 data的return中聲明一個(gè)Bus的屬性，并在后面那 new 一個(gè)新的Vue（），*這樣是為了方便后面子組件使用。
2、 index.vue 組件
index 組件中標(biāo)簽是由兩個(gè) h3、router-link 和 router-view 組成。
index 組件中JS代碼分別是在 data(){}、created: function(){}、methods:{}、beforeDestroy(){} 四個(gè)方法；
data(){}：在 data 中需要聲明一個(gè)叫 mage 的key，來(lái)接收子組件傳過(guò)來(lái)的值
created: function(){}：在 created 中需要使用 on 來(lái)監(jiān)聽(tīng) ‘eventName2’ 是否有變化，有變化則執(zhí)行 print() 方法，并且在print() 方法中把 value 賦值給它
methods:{}：在 methods 中需要實(shí)現(xiàn) print() 的方法，并在 print() 方法中使用 value 參數(shù)賦值給 mage
beforeDestroy(){}：在 beforeDestroy 方法銷(xiāo)毀前，將解除對(duì) ‘eventName2’ 的事件綁定
3、AA.vue 父組件
這個(gè)組件內(nèi)并沒(méi)有多少代碼，看圖自己寫(xiě)
4、a1.vue 子組件
（個(gè)人理解，如有寫(xiě)的不對(duì)，請(qǐng)指出，我會(huì)第一時(shí)間修改）
