質問

Vueコンポーネントにpropを渡したいのですが、これらのpropは将来そのコンポーネントの内部から変更されることを期待しています。したがって、それらはコンポーネントの初期化のためだけです。

私の cars-list Vueのコンポーネント要素で、初期プロパティを持つpropsを single-car :

// cars-list.vue

<script>
    export default {
        data: function() {
            return {
                cars: [
                    {
                        color: 'red',
                        maxSpeed: 200,
                    },
                    {
                        color: 'blue',
                        maxSpeed: 195,
                    },
                ]
            }
        },
    }
</script>

<template>
    <div>
        <template v-for="car in cars">
            <single-car :initial-properties="car"></single-car>
        </template>
    </div>
</template>

私が今やっている方法は、私の single-car コンポーネントの中で this.initialProperties を私の this.data.properties に created() の初期化フックです。そしてそれは動作し、リアクティブです。

// single-car.vue

<script>
    export default {
        data: function() {
            return {
                properties: {},
            }
        },
        created: function(){
            this.data.properties = this.initialProperties;
        },
    }
</script>

<template>
    <div>Car is in {{properties.color}} and has a max speed of {{properties.maxSpeed}}</div>
</template>

しかし、私の問題は、それが正しい方法なのかどうか分からないということです。途中でトラブルが起きたりしないのでしょうか？それとも、もっといい方法があるのでしょうか？

どのように解決するのですか？

おかげさまで https://github.com/vuejs/vuejs.org/pull/567 私は今、答えを知っています。

方法1

初期propを直接データに渡します。更新されたドキュメントにある例のように。

props: ['initialCounter'],
data: function () {
    return {
        counter: this.initialCounter
    }
}

ただし、渡されたpropが親コンポーネントの状態で使用されるオブジェクトや配列である場合、そのpropに変更を加えると親コンポーネントの状態も変更されることに注意してください。

警告 この方法は推奨されません。コンポーネントが予測不能になります。もし、子コンポーネントから親データを設定する必要がある場合は、Vuexのような状態管理を使用するか、"v-model"を使用してください。 https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

方法2

初期プロップがオブジェクトまたは配列で、子供の状態の変化が親の状態に伝搬しないようにしたい場合は、例えば、次のようにします。 Vue.util.extend [1]を使ってプロップのコピーを作成し、代わりにこのように直接子供のデータを指定します。

props: ['initialCounter'],
data: function () {
    return {
        counter: Vue.util.extend({}, this.initialCounter)
    }
}

方法3

spread演算子を使ってpropsをクローンすることもできます。詳しくはIgorの回答で。 https://stackoverflow.com/a/51911118/3143704

ただし、スプレッド演算子は古いブラウザではサポートされていないので、互換性を保つにはコードをトランスパイルする必要があります。 babel .

脚注

[1] これはVueの内部ユーティリティであり、新しいバージョンで変更される可能性があることを念頭に置いてください。他の方法でコピーすることをお勧めします。 JavaScriptオブジェクトを正しくクローンする方法は？ を参照してください。

私がそれをテストしていた私のフィドル。 https://jsfiddle.net/sm4kx7p9/3/