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

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

WBOY

リリース： 2023-06-15 22:57:22

オリジナル

5207 人が閲覧しました

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

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

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 の親コンポーネントと子コンポーネント間の非常に一般的な通信方法です。

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

$parent/$children

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

$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 サイトの他の関連記事を参照してください。