學習要點:
1.單向數據流
本節課我們來開始學習 Vue3.x 的組件中 Prop 的單向數據流。
一.單向數據流
1. 父組件的 data 值更新后通過 props 選項交給子組件進行渲染,反之則不行;
2. 這就是單向數據流(單向下行綁定),不能通過子組件來改變父組件的狀態;
3. 這樣做的是為了防止父組件發生改變后,數據流變得難以理解;
4. 父組件更新時,子組件所有 props 值也會更新,你不能改變子組件的 props 值;
5. 通過控制臺輸入 vm.message 賦值,子組件的自動渲染刷新;
vm.message = '改變父組件'
5. 我們可以通過設置一個父組件的計數器屬性,并且通過子組件去更改它;
data() {
return {
message : '父組件 Vue3.x~',
counter : 100
}
},
//prop 通信
props : ['parentMessage', 'parentCounter'],
// 模板
template : `
`,
PS:此時控制臺會告訴你,Props 是只讀,無法修改;
6. 那么,我們如何改變子組件這個值呢?可以考慮只改變子組件的值,父組件不變;
// 數據
data() {
return {
message : '子組件 Vue3.x~',
childCounter : this.parentCounter
// this 可以調用 props 內的屬性
}
},
// 模板
template : `
`,
PS:上面的寫法就是通過使用子組件的 data 屬性,讓 props 父組件的值先賦值過來;
PS:然后通過操作這個子組件的 childCounter 實現累加,而并未修改父組件的 Counter;
PS:當然,通過計算屬性 computed 或方法 methods 來修改 childCounter 也是可以的;
本文由:蘭州啟點網絡(
www.syzhibo.net)整理發布!