第一種通訊方式:父子元件通訊
1
2
// 1.引入子元件
import counter from'./counter'import son from'./son'
1
2
3
4
// 2.在ccmponents裡註冊子元件 components : ,
1
// 3.在template裡使用子元件
1
2
3
// 4.如果需要傳遞資料,也是在templete裡寫
1
2
// 1.用props接受資料 props: [ 'num'
],
1
2
3
4
5
6
// 2.如果需要修改得到的資料,可以這樣寫
props: ['num'
], data ()
},
1
2
3
4
// 1. 在templete裡應用子元件時,定義事件changenumber
>
1
2
3
4
5
// 2. 用changenumber監聽事件是否觸發
methods: ,
}
1
2
3
4
5
// 1. 子元件在資料變化後,用$emit觸發即可,第二個引數可以傳遞引數
methods: ,
}
eventbus這種通訊方式,針對的是非父子元件之間的通訊,它的原理還是通過事件的觸發和監聽。
但是因為是非父子元件的關係,他們需要有乙個中間元件來連線。
使用eventbus傳遞資料,我們一共需要做3件事情
2.在元件1裡,this.$root.bus.$emit觸發事件
3.在元件2裡,this.$root.bus.$on監聽事件
1
2
3
4
5
6
7
8
el:,
,
data()
}
})
1
2
3
4
// 2.在元件1裡,觸發emitincrement(),
1
2
3
4
// 3.在元件2裡,監聽事件,接受資料mounted())
},
這種通訊比較簡單,缺點是資料和狀態比較混亂,不太容易維護。
通過window.localstorage.getitem(key) 獲取資料
通過window.localstorage.setitem(key,value) 儲存資料
注意用json.parse() / json.stringify() 做資料格式轉換。
vuex比較複雜,可以單獨寫一篇
vue 中的多種組之間通訊方式
通過我近期面試的100多人中發現前三種使用的比較多 會vue的人基本都了解使用原理 後面幾種可能適用性不會那麼高 不過特定的問題解決起來也是很方便的 vue.component child template props message 得到父元件傳遞過來的資料 methods vue.compone...
vue父子通訊的方式
最近團隊在做 vue專案 層面上的優化。在此整理下vue父子元件通訊的方式。大綱 幾種通訊方式無外乎以下幾種 父元件 子元件 click 在子元件內 triggerclick this.emit update name newval update name其中name表示要更新的 prop 值。當然...
vue組價通訊問題
子元件 page1.vue 單價 降價1元 數量 二 通訊過程介紹 1.父元件向子元件傳值 1.1在父元件中引入需要通訊的子元件 import page1 from components page1 1.2 在父元件的components中註冊該子元件 components 1.3 在父元件的tem...