> ## **子组件能不能修改父组件传递过来的数据** ### **什么是单向数据流？** 数据从父组件传递给子组件，只能单向绑定。在子组件内部不应该修改父组件传递过来的数据。 子组件不能**直接**修改由父组件传递过来的数据 每次父级组件发生更新时，子组件中所有的 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哈哈~