> ## **子組件能不能修改父組件傳遞過來的數據** ### **什么是單向數據流？** 數據從父組件傳遞給子組件，只能單向綁定。在子組件內部不應該修改父組件傳遞過來的數據。 子組件不能**直接**修改由父組件傳遞過來的數據 每次父級組件發生更新時，子組件中所有的 prop 都將會刷新為最新的值。 如果你這樣做了，Vue 會在瀏覽器的控制臺中發出警告。 ~~~html <div id="app"> <custom-com :count="count"></custom-com> </div> ~~~ ~~~ // Author@小四 Vue.component('customCom', { props: ['count'], template: `<div> <h2>我是一個自定義組件</h2> <p>{{count}}</p> <input type="button" value="改變count的值" @click="changeCount"/> </div>`, methods: { changeCount() { this.count++; } } }); new Vue({ el: '#app', data: { count: 0 } }) ~~~ > 執行結果就是：控制臺報警告。代碼已貢獻，自行查看結果！！！你要是懶，那就放棄開發，錯過這個改變世界的可能！！！ ### **子組件修改父組件傳遞過來的數據的兩種方式** #### **第一種：子組件通過data修改父組件傳遞過來的數據，把傳遞過來的數據作為data中局部數據的初始值使用：** ~~~html <div id="app"> <custom-com :count="count"></custom-com> </div> ~~~ ~~~ // Author@小四 Vue.component('customCom', { props: ['count'], data() { return { increment: this.count } }, template: `<div> <h2>我是一個自定義組件</h2> <p>{{increment}}</p> <input type="button" value="改變count的值" @click="changeCount"/> </div>`, methods: { changeCount() { this.increment++; } } }); new Vue({ el: '#app', data: { count: 0 } }) ~~~ #### **第二種：子組件通過computed計算屬性來修改父組件傳遞過來的數據：** ~~~html <div id="app"> <custom-com :count="count"></custom-com> </div> ~~~ ~~~ // Author@SmallFour Vue.component('customCom', { props: ['count'], // 首先作為局部初始值 data() { return { increment: this.count } }, // 然后才能使用computed computed: { incrementCount() { return this.increment; } }, template: `<div> <h2>我是一個自定義組件</h2> <p>{{incrementCount}}</p> <input type="button" value="改變count的值" @click="changeCount"/> </div>`, methods: { changeCount() { this.increment++; } } }); new Vue({ el: '#app', data: { count: 0 } }) ~~~ > 恨鐵不成鋼吶，趕緊學習，找工作啊，O(∩_∩)O哈哈~