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

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

Vue.js では、双方向バインディングにより、子コンポーネントが直接変更できるようになります。親コンポーネントのプロパティ。ただし、Vue 2.0 のリリースにより、双方向バインディングは非推奨となり、イベント駆動型アーキテクチャが採用されました。

解決策: イベント駆動型通信

このアプローチでは、子コンポーネントは更新された値を使用してイベントを発生させます。親コンポーネントはこれらのイベントを処理し、それに応じてデータを変更します。たとえば、テキスト入力を含むカスタム子コンポーネントを作成してみましょう。

<code class="javascript">Vue.component('child', {
  template: '#child',
  props: ['value'],
  methods: {
    updateValue(value) {
      this.$emit('input', value);
    }
  }
});</code>

親値の更新

子コンポーネントでは、updateValue メソッドが呼び出されます。入力値が変化します。このメソッドは「input」イベントを発行し、更新された値を引数として渡します。

親のイベントをリッスン

親 Vue インスタンス内:

<code class="javascript">new Vue({
  el: '#app',
  data: {
    parentValue: 'hello'
  },
  methods: {
    handleInput(value) {
      this.parentValue = value;
    }
  }
});</code>

v-model によるバインディング

Vue.js は、v-model と呼ばれる双方向バインディングの便利な短縮表現を提供します。フォーム要素で v-model を使用すると、その要素が親コンポーネントの指定されたプロパティに自動的にバインドされます。以下のコードはこれを示しています。

<code class="html"><child v-model="parentValue"></child></code>

この例では、子コンポーネントの value プロパティが親コンポーネントのparentValue プロパティにバインドされています。子コンポーネントの入力を変更すると、親コンポーネントのparentValueが自動的に更新されます。

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