Vue で親コンポーネントと子コンポーネントの間で通信する方法

フロントエンド フレームワークの継続的な開発により、Vue.js は多くの開発者にとって推奨されるフレームワークの 1 つになりました。 Vue.js は、効率的で柔軟、信頼性が高く、保守しやすい開発方法を提供する進歩的な JavaScript フレームワークです。 Vue.js では、コンポーネントは重要な概念であり、複雑なページを実装する場合でも、コンポーネント化されたアプリケーションを構築する場合でも、コンポーネントを使用してそれらを実装する必要があります。

Vue.js では、コンポーネントを他のコンポーネント内にネストして、親子コンポーネント関係を形成できます。現時点では、親コンポーネントと子コンポーネントは、複雑なビジネス ロジックを完成させるために相互に通信する必要があることがよくあります。この記事では、Vue.js で親コンポーネントと子コンポーネント間で通信する方法を紹介します。

1. 一方向データ フロー

Vue.js では、親コンポーネントは通常、一方向データ フローの形式で子コンポーネント、つまり親コンポーネントにデータを送信します。 props 属性を子コンポーネントに渡します。データおよびサブコンポーネントはこれらのデータを直接変更できません。

親コンポーネントは、以下に示すように、子コンポーネントで props 属性を定義することによってデータを渡します。

<template>
  <div>
    <!-- 父组件向子组件传递 count 数据 -->
    <child-component :count="count"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      count: 0
    }
  }
}
</script>

親コンポーネントによって渡されたデータは、以下に示すように、子コンポーネントの props を通じて受信されます。

<template>
  <div>
    <!-- 子组件通过 props 接收 count 数据 -->
    <div>count: {{ count }}</div>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0
    }
  }
}
</script>

これで、親コンポーネントから子コンポーネントへのデータ送信のプロセスが完了しました。子コンポーネントは、受信したデータをレンダリング操作に使用できますが、データを直接変更することはできません。

2. サブコンポーネントは親コンポーネントにデータを渡します

Vue.js では、サブコンポーネントはカスタム イベントを通じて親コンポーネントにデータを渡します。子コンポーネントは $emit メソッドを通じてイベントをトリガーし、親コンポーネントは v-on ディレクティブを子コンポーネントに追加してイベントをバインドすることでリッスンします。

たとえば、子コンポーネントにボタンを定義します。ボタンがクリックされると、イベントがトリガーされ、以下に示すように、$emit メソッドを通じてデータが親コンポーネントに渡されます。 ##親コンポーネントでは、v を使用します。次に示すように、on 命令はイベントをバインドし、サブコンポーネントによってトリガーされたイベントをリッスンし、サブコンポーネントによって渡されたデータを受け取ります。サブコンポーネントから親コンポーネントにデータを送信するプロセスが完了します。サブコンポーネントは $ を渡します。emit メソッドはイベントをトリガーしてデータを渡します。親コンポーネントは、v-on ディレクティブを介してイベントをバインドして、子コンポーネントによって渡されるデータ。

3. $parent 属性と $children 属性を使用する

上記の 2 つの方法に加えて、Vue.js では、親間の接続を実現するために、$parent と $children という 2 つの属性も提供しています。および子コンポーネントの通信。子コンポーネント内の親コンポーネントのデータとメソッドにアクセスするには $parent プロパティを使用し、親コンポーネント内の子コンポーネントのデータとメソッドにアクセスするには $children プロパティを使用します。

たとえば、以下に示すように、子コンポーネントで親コンポーネントのデータとメソッドにアクセスするには:

<template>
  <div>
    <button @click="sendData">传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData () {
      // 通过 $emit 方法触发事件，并传递数据
      this.$emit('send-data', '这是子组件传递的数据')
    }
  }
}
</script>

親コンポーネントで子コンポーネントのデータとメソッドにアクセスするには、次のようにします。以下に示すように、$children 属性を使用できます。

<template>
  <div>
    <!-- 绑定子组件事件，监听子组件触发的事件 -->
    <child-component @send-data="getData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    getData (msg) {
      console.log(msg) // 打印子组件传递的数据
    }
  }
}
</script>

ただし、親コンポーネントと子コンポーネント間の通信に $parent 属性と $children 属性を使用することは、Vue.js のコンポーネント通信原則に準拠していません。頻繁に使用することはお勧めできません。このアプローチでは、子コンポーネントと親コンポーネントが緊密に結合されるため、コードの拡張と保守が困難になるためです。

概要

Vue.js では、props メソッドと $emit メソッドを通じて、親コンポーネントと子コンポーネントの間で一方向のデータ フローと双方向のバインディングを実現するか、$parent を使用することができます。親コンポーネントと子コンポーネント間の通信を実装する $children 属性。どの方法を使用する場合でも、密結合を回避するためにコンポーネント通信の拡張と保守を常に考慮する必要があり、これによりコードがよりシンプルでスケーラブルで保守可能になります。

以上がVue で親コンポーネントと子コンポーネントの間で通信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。