Vue元件通訊

這是乙個小白科普文，如果你對官方文件有點不理解，可以結合本文理解，本文不使用vuex.

總所周知vue是單向資料流，那麼元件之間如何相互傳值，相互通訊呢？本文使用vue.component全域性定義的元件，單檔案元件同理，語法請自行翻譯

父子元件之間相互通訊主要用到props和$emit

父元件通過props傳值給子元件

html

.....
'loginlink' @gotologin='onlogin'>
<--目光請看這裡
.....
複製**

methods:

}複製**

父元件通過v-bind把自己的loginlink給子元件，子元件通過props接受傳值。監聽子元件傳來的$emit事件呼叫自己的methos方法進行其他操作。

注意這裡有個坑，一定要好好通讀文件，v-bind:login-link='loginlink'中的login-link必須全部使用小寫加上-連線，不能使用駝峰命名，因為html中的標籤和屬性不能有大寫字母。

vue.component('child', )

複製**

父子元件通訊我們已經知道了，那麼爺孫元件怎麼通訊呢？直接使用props和$emit並不能直接通訊，我們換個思路，爺爺可以和兒子通訊，兒子可以和孫子通訊，那麼我們把兒子當作中轉。

html

.....
'loginlink' @gotologin='onlogin'>我是兒子
<--目光請看這裡
.....
複製**

methods:

}複製**

vue.component('child', )

複製**

vue.component('sunzi', )

複製**

兄弟元件應該是沒有任何關係以及耦合的，但是要通訊的話，還是可以，兩個兄弟通過父元件就可以通訊了，但是這樣**維護很困難，元件之間耦合太緊密了，還可以通過eventbus解決

var bus = new vue()

vue.prototype.$bus=bus
// 觸發元件 a 中的事件
this.$bus.$emit('songsting', data)
// 在元件 b 建立的鉤子中監聽事件
this.$bus.$on('songsting', (data)=>)
複製**

Vue 元件通訊

單層元件通訊 prop 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件 的資料。父元件的資料需要通過 prop 才能下發到子元件中。子元件要顯式地用 props 選項宣告它預期的資料 vue.component child 然後給他傳乙個訊息 message hel...

vue元件通訊

這部分vue文件已經說的很清楚了，但是為了更好的理解，自己再整理一遍。首先，父元件的與子元件的通訊是通過子元件的props。那麼子元件有資料變化時，想要通知父元件應該怎麼辦呢？父元件可以在使用子元件的地方直接用 v on 來監聽子元件觸發的事件。簡單來說，就是子元件監聽的事件，在函式內使用 emit...

Vue元件通訊

父子級通訊推薦使用 props emit parent children refs attrs listeners 子元件使用props 接收父元件傳遞的值 父元件向子元件傳值 子元件通過 emit 讓父元件接收事件，改變父元件的data裡面的值 子元件向父元件傳值 父元件 子元件 這裡的props...