//parent.vue
"title
">
//child.vue
props:
}
//parent.vue
"changetitle
">
//child.vue
this.$emit('
changetitle
', '
bubuzou.com
')
vue_2.4
//父元件 index.vue
class="
list-box
" title="
標題" desc="
描述" :list="
list
">
//子元件 list.vue
props: ,
mounted()
}
//子元件 list.vue
"$attrs
">
//孫子元件 detail.vue
//不定義props，直接列印 $attrs
mounted()
}
$attrs
//父元件 index.vue
"change
" @update.native="
update
">
//子元件 list.vue
"$listeners
">
//孫子元件 detail.vue
mounted()
provide/inject//父元件 index.vue
data()
}provide()
}}}//
孫子元件 detail.vue
inject: ['
detail'],
mounted()
provide
//eventbus.js
import vue from
'vue
'export
const eventbus = new vue()
import from'../utils/eventbus.js'//
訂閱處eventbus.$on('
update
', val =>{})
//發布處
eventbus.$emit('
update
', '
更新資訊
')
//main.js
vue.prototype.$eventbus = new vue()
使用：
//需要訂閱的地方
this.$eventbus.$on('
update
', val =>{})
//需要發布資訊的地方
this.$eventbus.$emit('
update
', '
更新資訊
')
如果想要移除事件監聽，可以這樣來：
this.$eventbus.$off('
update
', {})
總結Vue父子元件的7種通訊方式
父子元件要始終保持單向資料流動 否則隨著業務增長，會變得難以維護與除錯，因為資料變化的觸發點很難找到 解決方案 子元件通過this.emit 事件通知父元件來做處理 sync關鍵字是幫助這種情況而實現的 語法糖 最近工作不太順利，也非常忙碌。難得靠近春節假期稍微消停了一會，趕緊總結一些在專案開發過過...
整理4種Vue元件通訊方式
重點是梳理了前兩個,父子元件通訊和eventbus通訊,我覺得vue文件裡的說明還是有一些簡易,我自己第一遍是沒看明白。1.引入子元件 import counter from counter import son from son 2.在ccmponents裡註冊子元件 components 3.在...
vue元件之間8種元件通訊方式總結
對於vue來說，元件之間的訊息傳遞是非常重要的，下面是我對元件之間訊息傳遞的各種方式的總結，總共有8種方式。父元件向子元件傳遞資料是通過prop傳遞的，子元件傳遞資料給父元件是通過 emit觸發事件來做到的。vue.component child template props message 得到父...