vue父子组件传值之单向数据流以及解决方案

<div id="app">
        <counter :count="111"></counter>
        <counter :count="222"></counter>
    </div>

<script>
        var counter = {
    
    
            props: ['count'],
            template: '<div @click="handleClick">{
    
    {count}}</div>',
            methods: {
    
    
                handleClick() {
    
    
                    // 应该避免这样直接操作父组件传递来的值
                    this.count ++
                }
            }
        }
        var vm = new Vue({
    
    
            el: '#app',
            data: {
    
    },
            components: {
    
    
                counter
            }
        });
    </script>

虽然功能上没有什么问题，但是会报错
应该尽可能避免在子组件中修改父组件传递过来的数据，因为如果父组件传递过来的是引用类型的数据，子组件修改了的话，会对其他所有依赖这个数据的组件产生影响，这就是vue中的单向数据流

解决办法：子组件自己拷贝一份父组件传递过来的值拿来用

效果：