[解決済み】vuejs 子コンポーネントから親データを更新する

質問

vuejs (2.0)で遊び始めています。 私はその中に1つのコンポーネントを持つ簡単なページを作りました。 このページには、データを持つ1つのVueインスタンスがあります。 そのページで、htmlにコンポーネントを登録し、追加しました。 このコンポーネントには、1つの input[type=text] . その値を親（メインのVueインスタンス）に反映させたいのです。

コンポーネントの親データを正しく更新するには？ 親からバインドされたpropを渡すのは良くなく、コンソールにいくつかの警告を投げます。ドキュメントに何か書いてあるのですが、うまくいきません。

解決方法は？

Vue 2.0では、よりイベントドリブンなアーキテクチャを使用するために、双方向バインディングは非推奨となっています。一般に、子プロセスは、そのプロップを変更すべきではありません。むしろ、以下のようにすべきです。 $emit イベントを作成し、親がそのイベントに応答するようにします。

あなたの具体的なケースでは、カスタムコンポーネントに v-model . これは、双方向バインディングに近いものを可能にする特別な構文ですが、実際には、前述のイベント駆動型アーキテクチャの略記法です。詳しくはこちら -> https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events .

以下は簡単な例です。

Vue.component('child', {
  template: '#child',
  
  //The child has a prop named 'value'. v-model will automatically bind to this prop
  props: ['value'],
  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentValue: 'hello'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <p>Parent value: {{parentValue}}</p>
  <child v-model="parentValue"></child>
</div>

<template id="child">
   <input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template>

ドキュメントには次のように書かれています。

<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>

と同じです。

<custom-input v-model="something"></custom-input>

子プロップがvalueという名前である必要があるのはそういうわけで、子プロップが$emitという名前のイベントを出す必要があるのはそういうわけです。 input .