1. 程式人生 > 實用技巧 >VUE元件之間的通訊 父元件=>子元件( props) 子元件=>父元件(emit事件) 不同元件之間傳值

VUE元件之間的通訊 父元件=>子元件( props) 子元件=>父元件(emit事件) 不同元件之間傳值

VUE元件之間的通訊

父元件=>子元件( props)

①定義父元件,父元件傳遞 number這個數值給子元件,如果傳遞的引數很多,推薦使用json陣列{ }的形式
在這裡插入圖片描述
②定義子元件,子元件通過 props方法獲取父元件傳遞過來的值。props中可以定義能接收的資料型別,如果不符合會報錯。

在這裡插入圖片描述
假如傳的是動態引數 比如 input輸入的內容 v-model的形式
注意:傳遞的引數名稱 支援駝峰命名,下圖 描述不正確(1.0是不支援的)
在這裡插入圖片描述在這裡插入圖片描述

重點

父子元件傳值,資料是非同步請求,有可能資料渲染時報錯
原因:非同步請求時,資料還沒有獲取到但是此時已經渲染節點了

解決方案:可以在 父元件需要傳遞資料的節點加上 v-if = false,非同步請求獲取資料後,v-if = true

子元件=>父元件(emit事件)

在這裡插入圖片描述
在這裡插入圖片描述

不同元件之間傳值

通過eventBus(小專案少頁面用eventBus,大專案多頁面使用 vuex)
①定義一個新的vue例項專門用於傳遞資料,並匯出
在這裡插入圖片描述

②定義傳遞的方法名和傳輸內容,點選事件或鉤子函式觸發eventBus.emit事件
在這裡插入圖片描述

③接收傳遞過來的資料
注意:enentBus是一個另一個新的Vue例項,區分兩個this所代表得vue例項
在這裡插入圖片描述