vue-八種實作組建通信的方法

元件通信、props 父元件--->子元件通信、$emit 子元件--->父元件傳遞

$emit與props結合 兄弟元件傳值、bus(事件總線) 兄弟元件通信、children 直接通路元件執行個體、$refs、provide/inject(提供/注入) 多元件或深層次元件通信、vuex狀态管理、slot（slot-scope作用域插槽）

目錄

元件通信

1、props 父元件--->子元件通信

2、$emit 子元件--->父元件傳遞$emit與props結合 兄弟元件傳值

3、bus(事件總線) 兄弟元件通信

4、$parent、$children 直接通路元件執行個體

5、$refs

6、provide/inject(提供/注入) 多元件或深層次元件通信

7、slot（slot-scope作用域插槽） 子元素-->父元素（類似于通信）

8、vuex狀态管理

父元件---屬性的方式傳值給子元件

子元件---props方式接收資料

子元件props接受的參數名稱，要與父元件傳遞時定義的屬性名一緻

注意：

子元件不能夠直接去修改父元件傳遞的值修改的：因為Vue的單向資料流機制，如果直接修改那父元件的值就被“污染”了。(props是單向綁定的(隻讀屬性)：當父元件的屬性變化時，将傳導給子元件，但是反過來不會)

報錯資訊大概是：vue使用prop通信出錯:Avoid mutating a prop directly since the value will be overwritten whenever the parent

解決方案：可以在子元件内定義一個變量mydata去接收fData資料

參數傳遞類型不确定是可以這麼寫：

子元件綁定自定義事件

$emit()第一個參數為：自定義的事件名稱，第二個參數為：需要傳遞的資料

使用 $emit() 觸發更改資料

子元件

父元件(子元件發送的事件名稱，要和父元件接受的事件名稱一緻)

父元件引入兩個子元件

父元件充當一個橋梁作用

父元件

子元件B改變，接收資料

子元件A接收資料

非父子元件或更多層級間元件間傳值，在Vue中通過單獨的事件中心來管理元件間的傳值

建立一個公共的bus.js檔案

暴露出Vue執行個體

傳遞資料方，通過一個事件觸發bus.$emit(方法名，傳遞的資料)

接收資料方，在生命周期函數中，通過bus.$on(方法名,[params])來監聽

銷毀事件，在接受資料方，通過bus.$off(方法名)銷毀之後無法監聽資料

需要改變資料的元件中定義調用

另外一個元件中同樣引入bus.js檔案，通過$on監聽事件回調

子元件通過---> $parent 獲得父元件執行個體

父元件通過---> $children 獲得子元件執行個體數組

子元件---this.$parent可以擷取到父元件的方法、data的資料等，并可以直接使用和執行

父元件 --- 擷取子元件執行個體的，并且擷取的執行個體是一個數組形式,this.$children[0]才可以擷取某個元件執行個體,并調用元件方法和資料

ref被用來給元素或子元件注冊引用資訊。引用資訊将會注冊在父元件的 $refs 對象上。

父元件使用 $refs 獲得元件執行個體

provide/inject詳解

父元件使用 provide 注入資料

子元件使用 inject 使用資料

至此provideName這個變量可以提供給它其下的所有子元件，包括曾孫、孫子元件等，隻需要使用 inject 就能擷取資料

父元件不需要知道哪個元件使用它提供出去的資料

子附件不需要知道這個資料從哪裡來

用作一個 (能被傳遞資料的)可重用模闆，來代替已經渲染好的元素

在子元件中，隻需将資料傳遞到插槽，就像你将 prop 傳遞給元件一樣

注意：父級插槽接收内容是最外側元素 ，必須要有屬性slot-scope

子元素

父元素

相當于一個公共資料的倉庫

提供一些方法管理倉庫資料

官網