Vue.js 2.0で子コンポーネントから親データを更新するにはどうすればよいですか?

Vue.js の子コンポーネントから親データを更新する

Vue.js 2.0 では、従来の双方向バインディングがイベント駆動型アーキテクチャ。これは、子コンポーネントがその props を直接変更すべきではないことを意味します。代わりに、イベントを発行し、親がそれらのイベントに応答できるようにする必要があります。

子コンポーネントから親データを更新するには、v-model でカスタム コンポーネントを使用できます。この特別な構文はイベント駆動型アプローチの短縮形を提供し、prop を子コンポーネントの値に直接バインドできるようにします。仕組みは次のとおりです:

1. 子コンポーネントを作成します:

Vue.component('child', {
  template: '#child',
  props: ['value'],
  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});

• 値 prop は、子コンポーネントが作成するデータです。
• 子コンポーネントの入力値が変更されると、updateValue メソッドが呼び出されます。新しい値を引数として渡して、入力イベントを発行します。

2. 親 Vue インスタンスを作成します:

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

• parentValue データ プロパティは、親テンプレートに表示される値を保持します。

3. 子コンポーネントで v-model を使用します:

<child v-model="parentValue"></child>

• v-model を使用すると、parentValue データ プロパティと子コンポーネントの prop 値の間に双方向のバインディングが確立されます。

4. 親で入力イベントを処理します:

子コンポーネントで入力値が変更されると、updateValue メソッドが入力イベントを発行します。親 Vue インスタンスでは、次のコードを使用してこのイベントを処理できます:

handleInputEvent(value) {
  this.parentValue = value;
}

これにより、子コンポーネントの入力値が変更されるたびに、parentValue データ プロパティが更新されます。

次のようにします。このイベント駆動型のアプローチにより、Vue.js 2.0 の子コンポーネントから親データを効果的に更新し、クリーンなモジュール式アーキテクチャを維持できます。

以上がVue.js 2.0で子コンポーネントから親データを更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。