VUE3 基本チュートリアル: 親コンポーネントと子コンポーネント間の通信のいくつかの方法

最新のフロントエンド フレームワークの継続的な開発に伴い、Vue を使用してユーザー インターフェイスを構築することを選択する企業や開発者が増えています。 Vue.js は、高品質の単一ページ アプリケーションを迅速に構築するための柔軟な開発方法を提供する、ユーザー インターフェイスを構築するための進歩的なフレームワークです。

Vue.js では、コンポーネントはユーザー インターフェイスを構築するための中心的な概念です。 Vue.js コンポーネントは、ライフサイクルを持つ自己完結型の再利用可能なコード モジュールです。コンポーネントは、通信や対話が必要な他の多くのコンポーネントで構成される場合があります。この記事では、Vue.js の親コンポーネントと子コンポーネントの間で通信するいくつかの方法を紹介します。

1. Props プロパティの転送

Props は、親コンポーネントから子コンポーネントにデータを渡す方法です。 Vue.js では、親コンポーネントはプロパティを通じて子コンポーネントにデータを渡すことができます。子コンポーネントはこれらのプロパティを受け取り、これらの値を使用して独自のテンプレートをレンダリングできます。

親コンポーネントでは、v-bind ディレクティブを使用して、値を子コンポーネントの props 属性にバインドできます。

<template>
  <div>
    <child-component :message="'Hello world'"></child-component>
  </div>
</template>

子コンポーネントでは、親コンポーネントを受け取ることができます。 props 属性を通じて 渡されるデータ:

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
})

props 属性を通じて、親コンポーネントと子コンポーネント間のデータ フローを明確に表現できます。このメソッドは、Vue.js の親コンポーネントと子コンポーネント間の非常に一般的な通信方法です。

2. $emit カスタム イベント

Vue.js では、各 Vue インスタンスにイベント バスがあり、$emit を使用してカスタム イベントをトリガーできます。親コンポーネントはカスタム イベントを定義し、$emit を使用して子コンポーネントでこれらのイベントをトリガーできます。サブコンポーネントは $on を通じてこれらのイベントをリッスンし、対応する操作を実行できます。

親コンポーネントでは、$emit を使用してカスタム イベントを定義できます:

new Vue({
  el: '#app',
  methods: {
    showMessage() {
      this.$emit('message');
    }
  }
})

子コンポーネントでは、$on を使用してこのカスタム イベントをリッスンできます:

Vue.component('child-component', {
  template: '<div v-on:message="showMessage">Child message</div>',
  methods: {
    showMessage() {
      // 处理点击事件
    }
  }
})

$emit カスタム イベントを通じて、子コンポーネントは親コンポーネントにメッセージを送信して、通信目的を達成できます。

3. $parent/$children

Vue.js では、各コンポーネントに $parent プロパティと $children プロパティがあります。これら 2 つのプロパティにより、コンポーネントは親コンポーネントと子コンポーネントに直接アクセスできます。この方法はより簡単ですが、洗練されていないと感じる人もいます。

4. $refs の使用

Vue.js では、すべてのコンポーネントに $refs プロパティがあります。登録されているすべてのサブコンポーネントには、$refs を使用してアクセスできます。この属性により、親コンポーネントは子コンポーネントに直接アクセスし、そのメソッドとプロパティを直接呼び出すことができます。

親コンポーネントでは、$refs を使用して子コンポーネントにアクセスし、そのメソッドを呼び出すことができます:

new Vue({
  el: "#app",
  methods: {
    handleClick() {
      this.$refs.childComponent.handleClick();
    }
  },
  components: {
    childComponent
  }
})

子コンポーネントでは、handleClick メソッドを定義できます:

Vue.component('child-component', {
  methods: {
    handleClick() {
      // 处理点击事件
    }
  }
})

$ refs を使用すると、親コンポーネントは子コンポーネントのメソッドとプロパティに直接アクセスできますが、$refs の値が未定義になる可能性があるため、使用する場合は注意が必要です。

概要

Vue.js では、コンポーネントはユーザー インターフェイスを構築するための中心的な概念です。親コンポーネントと子コンポーネント間の通信のために、Vue.js は Props、カスタム イベント、$parent/$children、$refs などのさまざまなメソッドを提供します。実際の開発では、状況に応じてコンポーネント間の通信を実装するための適切な方法を選択する必要があります。同時に、これらの方法を使用して、より柔軟で再利用可能なコンポーネントを構築し、開発効率とユーザー エクスペリエンスを向上させることもできます。

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