Vue.js のイベント駆動型アーキテクチャで親データを更新するにはどうすればよいですか?

Vue.js のイベント駆動型アーキテクチャによる親データの更新

Vue.js では、双方向バインディングは利用できなくなりました。バージョン 2.0 は非推奨になったため。代わりに、よりイベント駆動型のアーキテクチャが採用されており、子コンポーネントはプロパティを直接操作すべきではありません。むしろ、イベント発行を使用して親コンポーネントと通信する必要があります。

子コンポーネントから親データを更新したい場合は、v-model でカスタム コンポーネントを使用することを検討してください。この特別な構文は双方向バインディングにほぼ似ていますが、イベントを使用して実装されます。

簡単な例を次に示します:

<code class="javascript">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'
  }
});</code>

<code class="html"><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></code>

この例では:

• 子コンポーネントには、親コンポーネントのparentValue データ プロパティにバインドされた v-model ディレクティブがあります。
• ユーザーが子コンポーネントの入力フィールドに値を入力すると、updateValue メソッドは次のようになります。
• このメソッドは、値をパラメータとして持つ入力イベントを発行し、親コンポーネントによって処理されます。
• 親コンポーネントは、親コンポーネントによって発行された値に基づいて、parentValue データ プロパティを更新します。子コンポーネント。

以上がVue.js のイベント駆動型アーキテクチャで親データを更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。