VUE 元件(二)元件通訊

2022-07-02 20:00:13 字數 588 閱讀 7452

元件關係可分為父子元件通訊、兄弟元件通訊、跨級元件通訊。

一、自定義事件——當子元件向父元件傳遞資料時,就要用到自定義事件

子元件用$emit()來觸發事件,父元件用$on()來監聽子元件事件

通過兩個按鈕實現+1 -1的效果,在改變元件data中的count後,通過$emit()將值傳給父元件,父元件用v-on:increase和v-on:redicu

$emit()第乙個引數是自定義事件名稱,第二個引數是要傳遞的引數,可以不填或者填寫多個。

二、非父元件通訊——跨級元件、兄弟元件

vue2推薦使用乙個空的vue例項作為**事件匯流排(bus),也就是中介。

這種方式巧妙的實現了任何元件間的通訊,還可給bus例項新增data,computed,methods等。

還有一種更好的解決方案——vuex,以後另外寫專題

子元件索引——ref

vue提供了子元件索引的方法,用特殊的屬性ref來為子元件定義乙個特殊的索引名。

}

Vue 二 元件間通訊

父元件中定義元素 如job 初始化 data 資料 data function 父元件中子元件標籤中定義並繫結資料 如 job job 等號左邊屬性名需和子元件定義 呼叫的寫法一樣,右邊表示父元件中的資料元素 name name job job namewasreset name event res...

vue 2 0 元件 父子元件通訊

示例 輸入框 通過this.emit input value 將將使用者的之輸出到v model繫結的值 randomid v bind value value v on input oninput 複製 export default data function methods 複製 msg 複製 ...

vue知識點 二) 元件通訊

想起這些實在有些繁瑣,於是剛開始開發就走了捷徑,選擇了vuex進行頁面間傳值 1.搭建vue腳手架,安裝vuex依賴 2.專案目錄src下新建store目錄和store.js檔案 通常store物件都包含4個屬性 state,getters,actions,mutations。state 類似儲存全...