Vモデルは、オブジェクトを結合、内部コンポーネントは、達成するためにシーンの異なる分野を担当しています

私たちは、父と息子のコンポーネント間のデータ転送や同期を維持、Vモデルは、単一のプロパティを結合双方向のデータに有用であることを知っているが、また、コンポーネントは、シーンの多くの下でより多くのデータフィールドを扱うことができますしたい、その後、いくつかの小さなトリックがアップしています。

https://simonkollross.de/posts/vuejs-using-v-model-with-objects-for-custom-components

たとえば、次のようcreateCustomerのコンポーネント：

< テンプレート> 
  < divの> 
    < divの> 
      < ラベル>名前</ ラベル> 
      < 入力タイプ= "テキスト" ：値= "value.name" @input = "更新（ '名前'、$のevent.target.value）" > 
    </ divの> 
    < divの> 
      < ラベル>タイプ</ ラベル> 
      < 選択：値= "value.type" @input = "更新（ 'タイプ'、$のevent.targetを。値）」 > 
        < オプション値= "人" >人</ オプション> 
        < オプション値= "会社" >会社</ オプション> 
      </ 選択> 
    </ DIV > 
  </ DIV > 
</ テンプレート> 
< スクリプト> 
輸出デフォルト{ 
  小道具：[ " 値' ]、
  方法：{ 
    更新（キー、値）{ 
      この。$（発する' 入力」{...この.VALUE、[キー]：値}）
    } 
  } 
} 
</ スクリプト>

コンポーネントを使用します。

< createCustomerのVモデル= "{名： 'ジョン・ドウ'、種類：「人}" > </ createCustomerの>