一方向のデータフローと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です。单向数据流

解決策：子コンポーネントは、親コンポーネントから渡された値をコピーして使用します。

効果：