[解決済み] V-modelと子コンポーネント？

質問

フォームを作成し、v-modelを使用して入力をバインドしています。

<input type="text" name="name" v-model="form.name">

次に、入力を取り出して独自のコンポーネントにしたいのですが、子コンポーネントの値を親オブジェクトにどのようにバインドするのでしょうか。 form.name ?

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

ドキュメントに記載されているように ,

v-model は構文糖です。

<input
 v-bind:value="something"
 v-on:input="something = $event.target.value">

を実装するために v-model ディレクティブを実装します。

• を指定します。 value のプロップを指定します。
• で計算されたプロパティを作成します。 computed setter を持つコンピューテッドプロパティを作ります (コンポーネントの内部からプロップの値を修正してはならないため)。
• を定義します。 get メソッドを定義します。 value プロパティの値
• を定義します。 set メソッドを定義します。 input イベントを発生させます。

以下は簡単な例です。

Vue.component('my-input', {
  template: `
    <div>
      My Input:
      <input v-model="inputVal">
    </div>
  `,
  props: ['value'],
  computed: {
    inputVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  }
})

new Vue({
  el: '#app',
  data() {
    return { 
      foo: 'bar' 
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <!-- using v-model... -->
  <my-input v-model="foo"></my-input>
  
  <!-- is the same as this... -->  
  <my-input :value="foo" @input="foo = $event"></my-input>

  {{ foo }}
</div>

おかげさまで kthornbloom が以前の実装の問題を発見してくれたことに感謝します。

Vue 3での変更点

ドキュメントによると によると、Vue 3 では v-model の実装に大きな変更が加えられています。

• value -> modelValue
• input -> update:modelValue