v-model を使用して Vue.js の子コンポーネントから親データを更新するにはどうすればよいですか?

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

Vue.js では、親コンポーネントと子コンポーネント間のデータ フローを処理することが重要です効果的に。この記事では、子コンポーネント内の入力フィールドから親のデータを更新するシナリオについて説明します。

問題:

Vue.js 2.0 以降では、双方向バインディングは非推奨になりました。 props を使用して親から子にデータを渡す場合、コンソールの警告が表示される可能性があるため、props を直接変更することはお勧めできません。

解決策:

親のプロパティを更新するにはデータを使用すると、v-model でイベント駆動型アーキテクチャとカスタム コンポーネントを使用できます。 V モデルは、イベントを使用して親と子の間で通信する双方向バインディングの構文を提供します。

実装:

次のテンプレートを使用して子コンポーネントを作成します。入力フィールドが含まれます:

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

子コンポーネントのスクリプトに、「value」プロパティと、更新された値を含む「input」イベントを発行する「updateValue」メソッドを追加します:

<code class="javascript">Vue.component('child', {
  template: '#child',

  props: ['value'],

  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});</code>

親ビューで、親データを使用して Vue インスタンスを作成し、v-model で子コンポーネントを使用します。

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

子コンポーネントの入力フィールドの値が変更されると、「updateValue」メソッドが呼び出され、更新された値が「入力」イベントとして出力されます。親 Vue インスタンスは発行されたイベントを受け取り、それに応じてその 'parentValue' を更新します。

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