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

Vue.js での親子データ更新の通信

Vue.js の世界を深く掘り下げていくと、さまざまな状況に遭遇するでしょう。ここでは、子コンポーネントからその親にデータを更新する必要があります。双方向バインディングは Vue 1.x では普及していましたが、Vue 2.x ではイベント駆動型のアプローチが採用され、非推奨になりました。

Vue 2.0 で親と子の間のデータ更新を処理するには、次のようにします。 v-model でカスタム コンポーネントを利用できます。 V モデルは、Vue が採用するイベント駆動型アーキテクチャに便利なショートカットを提供する特別な構文です。

次の例を考えてみましょう:

<code class="js">Vue.component('child', {
  template: '#child',
  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>

この例では:

• 子コンポーネントには、v-model を通じて親のデータ プロパティと同期される value という名前のプロップがあります。
• ユーザーが子コンポーネントの入力フィールドに入力すると、 updateValue メソッドがトリガーされます。
• updateValue メソッドは、更新された値を持つ入力イベントを親コンポーネントに送信します。
• 親コンポーネントは入力イベントを受け取り、それに応じて自身のparentValue データ プロパティを更新します。

このイベントベースのアプローチを使用すると、分離されたモジュール式コンポーネント アーキテクチャを維持しながら、親子データの更新を効果的に管理できます。

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