手機: 18919834768
電話熱線: 0931-7603702
網站知識
當前位置: 主頁 > 網站知識

vue3組件單向數據流

發布時間:2023-03-02 16:27:18???來自:未知???編輯:蘭州啟點網絡 www.ing-cap.com.cn

學習要點:
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 : `
{{parentCounter}}
`,
PS:此時控制臺會告訴你,Props 是只讀,無法修改;
6. 那么,我們如何改變子組件這個值呢?可以考慮只改變子組件的值,父組件不變;
// 數據
data() {
return {
message : '子組件 Vue3.x~',
childCounter : this.parentCounter
// this 可以調用 props 內的屬性
}
},
// 模板
template : `
{{counter}}
{{childCounter}}
`,
PS:上面的寫法就是通過使用子組件的 data 屬性,讓 props 父組件的值先賦值過來;
PS:然后通過操作這個子組件的 childCounter 實現累加,而并未修改父組件的 Counter;
PS:當然,通過計算屬性 computed 或方法 methods 來修改 childCounter 也是可以的;
本文由:蘭州啟點網絡(www.ing-cap.com.cn)整理發布!

? QQ咨詢

建站咨詢 售前咨詢 私人訂制 售后技術

? 電話咨詢

0931-7603702
(早9:00-晚10:00)

? 微信咨詢

掃碼關注
點點租

? 返回頂部
0.143290s
国产精品va无码二区_国产肥熟女视频一区二区三区_欧美亚洲另类在线一区_日韩亚洲中文字幕