在上个周的面试中，有个小伙伴被问到了关于“子组件能不能修改父组件传递过来的数据”的问题
1、什么是单向数据流？
数据从父组件传递给子组件，只能单向绑定。在子组件内部不应该修改父组件传递过来的数据。
子组件不能直接修改由父组件传递过来的数据
每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。
如果这样做了，Vue 会在浏览器的控制台中发出警告
[JavaScript] 纯文本查看 复制代码 <div id="app">
<custom-com :count="count"></custom-com>
</div>
[JavaScript] 纯文本查看 复制代码 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
}
})
执行结果就是：控制台报警告
2、子组件修改父组件传递过来的数据的两种方式
第一种：子组件通过data修改父组件传递过来的数据，把传递过来的数据作为data中局部数据的初始值使用：
[JavaScript] 纯文本查看 复制代码 <div id="app">
<custom-com :count="count"></custom-com>
</div>
[JavaScript] 纯文本查看 复制代码 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计算属性来修改父组件传递过来的数据：
[JavaScript] 纯文本查看 复制代码 <div id="app">
<custom-com :count="count"></custom-com>
</div>
[JavaScript] 纯文本查看 复制代码 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
}
})
| 
收藏
淘帖
踩
