Vue.js 2の初期データとして小道具を渡す正しい方法は何ですか？

Question

私はVueコンポーネントに小道具を渡したいと思いますが、私はこれらの小道具が将来そのコンポーネントの内部から変更されることを期待しています。私がAJAXを使って内部からVueコンポーネントを更新するとき。したがって、コンポーネントの初期化のみに使用されます。

私はsingle-carに初期特性との小道具を渡すマイcars-list Vueのコンポーネント要素：

// 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.data.propertiescreated()の初期化にthis.initialPropertiesを割り当ててること、それを行う方法フック。それは機能し、反応的です。

// 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> 

しかし、私の問題は、それが正しい方法であるかどうかわかりません。それは私に道に沿っていくつかのトラブルを引き起こさないでしょうか？それとももっと良い方法がありますか？

Answer 1

として、私は今、答えを知っているこのhttps://github.com/vuejs/vuejs.org/pull/567のおかげで小道具の初期値を使用してローカルデータプロパティを定義します。

方法1

初期小道具を直接データに渡します。更新ドキュメントの例のように：

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

しかし、心の中で持って渡された小道具は、小道具に何らかの変更がその親コン​​ポーネントの状態の変化をもたらすだろう親コンポーネントの状態で使用されているオブジェクトや配列がある場合。

方法2

あなたの最初の小道具は、オブジェクトまたは配列であり、あなたが子供の変化は、状態の親状態に伝播したくないならば、ちょうど例えば使用している場合Vue.util.extend [1]のように、子どもたちのデータに直接指し示す代わりに、小道具のコピーを作成する：

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

脚注

[1]これは内部Vueのユーティリティであり、それは変更される可能性があり心を持っています新しいバージョンで。その小道具をコピーするには、他の方法を使用するとよいでしょう。「How do I correctly clone a JavaScript object?」を参照してください。

私はそれをテストしていた

マイフィドル： https://jsfiddle.net/sm4kx7p9/3/

Answer 2

私はあなたが正しいことをしていると信じています。なぜなら、ドキュメントに書いてあるとおりです。

その初期値

https://vuejs.org/guide/components.html#One-Way-Data-Flow