元件關係可分為父子元件通訊、兄弟元件通訊、跨級元件通訊。
一、自定義事件——當子元件向父元件傳遞資料時,就要用到自定義事件
子元件用$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 類似儲存全...