學習要點：
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)整理發布!
啟點CMS演示地址及賬號
