重點是梳理了前兩個,父子元件通訊和eventbus通訊,我覺得vue文件裡的說明還是有一些簡易,我自己第一遍是沒看明白。
//1.引入子元件
import counter from './counter'import son from './son'
//2.在ccmponents裡註冊子元件
components : ,
//3.在template裡使用子元件
//4.如果需要傳遞資料,也是在templete裡寫
//1.用props接受資料
props: [
'num'],
//2.如果需要修改得到的資料,可以這樣寫
props: [
'num'],
data ()
},
//1. 在templete裡應用子元件時,定義事件changenumber
@changenumber="changenumber"
>
//2. 用changenumber監聽事件是否觸發
methods: ,
}
//1. 子元件在資料變化後,用$emit觸發即可,第二個引數可以傳遞引數
methods: ,
}
eventbus這種通訊方式,針對的是非父子元件之間的通訊,它的原理還是通過事件的觸發和監聽。
但是因為是非父子元件的關係,他們需要有乙個中間元件來連線。
使用eventbus傳遞資料,我們一共需要做3件事情
2.在元件1裡,this.$root.bus.$emit觸發事件
3.在元件2裡,this.$root.bus.$on監聽事件
//import vue from 'vue'
newvue(
}})//2.在元件1裡,觸發emit
increment(),
//3.在元件2裡,監聽事件,接受資料
mounted())
},
這種通訊比較簡單,缺點是資料和狀態比較混亂,不太容易維護。
通過window.localstorage.getitem(key) 獲取資料
通過window.localstorage.setitem(key,value) 儲存資料
注意用json.parse() / json.stringify() 做資料格式轉換。
vuex比較複雜,可以單獨寫一篇
vue元件通訊7種方式
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...
vue元件之間8種元件通訊方式總結
對於vue來說，元件之間的訊息傳遞是非常重要的，下面是我對元件之間訊息傳遞的各種方式的總結，總共有8種方式。父元件向子元件傳遞資料是通過prop傳遞的，子元件傳遞資料給父元件是通過 emit觸發事件來做到的。vue.component child template props message 得到父...
vue元件之間8種元件通訊方式總結
對於vue來說，元件之間的訊息傳遞是非常重要的，下面是我對元件之間訊息傳遞的各種方式的總結，總共有8種方式。父元件向子元件傳遞資料是通過prop傳遞的，子元件傳遞資料給父元件是通過 emit觸發事件來做到的。vue.component child template props message 得到父...