Vue向上13コンポーネントにv-modelを使用

v-modelは双方向バインディングを実現することができる:

実際には文法糖であり、

コンポーネントにも使用できます.コンポーネントに使用する場合は、次のようになります.

正常に動作するために、このコンポーネント内のinputは、
1 valueのプロパティをvalueというpropにバインド
2 inputイベントがトリガーされたとき、カスタムinputイベントを介して新しい値が投げ出される

Vue.component('comp', {
  props: ['value'],
  template: `
    
  `
})

これにより,コンポーネント内外のデータの双方向バインドが実現される.
このコンポーネントのv-modelのデフォルトでは、valueというpropとinputというイベントが利用されますが、ラジオボックス、チェックボックスなどの入力コントロールにはvalueは必要なく、checkedが必要で、oninputイベントは必要なく、onchangeイベントが必要です.modelオプションでは、次のような競合を回避できます.

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    
  `
})

このコンポーネントでv-modelを使用している場合:

ここでのlovingVueの値は、checkedというpropに渡されます.同時に、がchangeイベントをトリガーし、新しい値が付随すると、このlovingVueのプロパティが更新されます.
コンポーネントのpropsオプションでcheckedというpropを宣言する必要があることに注意してください.
リファレンス

Vue.js-コンポーネント上でv-model

を使用

Vue.js-カスタムコンポーネントのv-model

簡書-Vue進級教程之:詳細v-model