Vue元件通訊

父子級通訊推薦使用：props/$emit、$parent/$children/$refs、$attrs/$listeners

子元件使用props 接收父元件傳遞的值（父元件向子元件傳值）。子元件通過 $emit ，讓父元件接收事件，改變父元件的data裡面的值（子元件向父元件傳值）。

}

這裡的props有兩種寫法物件和陣列，用法不一樣，效果都一樣。這裡我就直接把官方的解釋貼出來吧

通過建立乙個包含vue 的例項的eventbus中間倉庫，用來觸發事件和監聽事件，實現兄弟、非父子元件的通訊。當元件a執行setvalue方法觸發了$emit後，會觸發元件b中的$on監聽事件。

bus.js:

import vue from 'vue'

export default new vue()

元件a：

}

元件b：

}

vuex 是乙個單向的資料流的狀態管理模式，state 存放資料，當需要改變state 的資料時，只能通過 mutation 更改，如果有非同步操作，可以使用 action，最終action 還是通過mutation 更改state 的資料。

$parent和$children 可以訪問到父元件或子元件（陣列）的例項，所以也可以用作通訊。$children和$ref的區別在於乙個是返回所有子元件，乙個是指定的子元件。

this.$attrs 包含了父作用域中不作為prop被識別的特性繫結(class和style除外)，解釋就是，父元件傳遞了props ，但是子元件沒有全部使用props 接收，沒被子元件接收的那些props，在$attrs中就可以獲取到；$listeners 即是包含了父作用域中的(不含.native修飾器的)v-on 事件***，可以使用 v-on='$listeners'傳入到內部元件；在跨級元件中傳遞屬性和事件非常有用。

< !--頂級元件a-->

祖先元件通過 provide 向子孫級元件提供乙個物件或返回乙個物件的函式，該物件包含可以注入子孫元件的屬性。

vue 不建議直接應用於程式**中，主要是為高階外掛程式/元件庫提供使用

Vue 元件通訊

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

vue元件通訊

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

Vue 元件通訊

一 父子元件間 自定義事件 子元件用 emit 來觸發事件，父元件用 on來監聽子元件的事件。父元件 父元件函式 handlegettotal function total 子元件 1 子元件函式 handleincrease function 二 父子元件間 使用v model 在自定義元件上使用...