面试题之父子组数据修改问题

在上个周的面试中，有个小伙伴被问到了关于“子组件能不能修改父组件传递过来的数据”的问题
1、什么是单向数据流？
数据从父组件传递给子组件，只能单向绑定。在子组件内部不应该修改父组件传递过来的数据。
子组件不能直接修改由父组件传递过来的数据
每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。
如果这样做了，Vue 会在浏览器的控制台中发出警告

<div id="app">
  <custom-com :count="count"></custom-com>
</div>
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中局部数据的初始值使用：

<div id="app">
  <custom-com :count="count"></custom-com>
</div>

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计算属性来修改父组件传递过来的数据：

<div id="app">
  <custom-com :count="count"></custom-com>
</div>


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
        }
    })