技術共有

Vue 3コンポーネント通信を基礎から応用テクニックまで徹底解説

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

導入

Vue 3 では、Composition API が導入され、コンポーネント通信に新たな柔軟性と機能がもたらされます。

コンポーネント通信の基本

コンポーネントの定義と機能

フロントエンド開発では、コンポーネントはユーザー インターフェイスを構築する独立したユニットとして考えることができます。特定の機能とスタイルをカプセル化し、再利用でき、他の部分から独立して開発およびテストできます。コンポーネントの主な機能は、コードの再利用性、保守性、拡張性を向上させることです。インターフェイスを複数のコンポーネントに分割することで、開発者は複雑なアプリケーションをより簡単に管理できるようになり、各コンポーネントを最適化して全体的な開発効率とアプリケーションのパフォーマンスを向上させることができます。

コンポーネントツリーと親子コンポーネント関係

Vue.js のようなフロントエンド フレームワークでは、コンポーネントをネストしてコンポーネント ツリーを形成できます。このツリー構造では、各コンポーネントはサブコンポーネントを持つことができ、これらのサブコンポーネントは独自のサブコンポーネントを持つことができ、階層構造を形成します。この構造により、コンポーネント間の関係が明確になり、管理と保守が容易になります。

  • コンポーネントの親子関係 : コンポーネントツリーでは、コンポーネントは別のコンポーネントを作成できます。この場合、作成者は親コンポーネントと呼ばれ、作成されたコンポーネントは子コンポーネントと呼ばれます。親コンポーネントはデータとメソッドを子コンポーネントに渡すことができ、子コンポーネントはイベントを通じて親コンポーネントに情報を送信できます。この親子関係がコンポーネント通信の基礎となります。
  • 兄弟コンポーネントの関係 : 同じ親コンポーネントの下にある複数の子コンポーネントは、兄弟コンポーネント関係となります。兄弟コンポーネントは相互に直接通信できず、通常、兄弟コンポーネント間の通信は親コンポーネントを介して中継される必要があります。
  • 祖先コンポーネントと子孫コンポーネントの関係 : コンポーネントツリーでは、親コンポーネントの親コンポーネントが祖先コンポーネント、子コンポーネントの子コンポーネントが子孫コンポーネントになります。この関係は、深くネストされたコンポーネントを扱う場合に特に重要です。

コンポーネント ツリーとコンポーネントの親子関係の概念は、コンポーネントの通信を理解するために重要です。これらの基本知識を習得すると、開発者がコンポーネント間の通信メカニズムをより効果的に設計および実装するのに役立ちます。

親子コンポーネント通信 (Vue 3)

親は子にデータを渡します (Props)

小道具とは
Props は、親コンポーネントが子コンポーネントにデータを渡すためのメカニズムです。Vue 3 では、次を使用します。definePropsAPI は受信プロパティを宣言するために使用されます。これにより、データの一方向の流れが維持され、コンポーネントの独立性と再利用性が保証されます。

親コンポーネントでpropsを渡す方法
親コンポーネントのテンプレートで、次を使用します。v-bindまたは略語:データをバインドするには:

  1. <template>
  2.    <ChildComponent :my-prop="parentData" />
  3. </template>

ここ、:my-propこれが動的にバインドされたプロップであることを示します。parentData親コンポーネントで定義されたデータですか。

子コンポーネントでpropsを受け取る方法
子コンポーネントで、次を使用します。defineProps受け取った props を宣言するには:

  1. <script setup>
  2. import { defineProps } from 'vue';
  3.  
  4. const props = defineProps({
  5.    myProp: String
  6. });
  7. </script>

存在する<script setup>糖衣構文では、defineProps小道具をコンポーネントの応答プロパティとして自動的に公開します。

子が親にイベントを渡す (Emit)

何を発するのか
Emit は、子コンポーネントが親コンポーネントにメッセージを送信するメカニズムです。Vue 3 では、次を使用します。defineEmits発行できるイベントを宣言して使用するための APIemitイベントをトリガーする関数。

子コンポーネントでイベントをトリガーする方法
子コンポーネントのメソッドで、次を使用します。 defineEmits 発行できるイベントを宣言し、使用します emit トリガーするには:

  1. <script setup>
  2. import { defineEmits } from 'vue';
  3.  
  4. const emit = defineEmits(['my-event']);
  5.  
  6. function triggerEvent() {
  7.    emit('my-event', dataToPass);
  8. }
  9. </script>

defineEmitsコンポーネントが発行できるイベントを宣言するために使用されます。emitこれらのイベントをトリガーするには関数が使用されます。

親コンポーネントで子コンポーネントのイベントをリッスンする方法
親コンポーネントのテンプレートでは、使用v-onまたは略語@ 子コンポーネントによって発行されたイベントをリッスンするには:

  1. <template>
  2.    <ChildComponent @my-event="handleEvent" />
  3. //或者<ChildComponent v-on:my-event="handleEvent" />
  4. </template>

ここ、@my-eventリッスンしているサブコンポーネントが出力することを示します。my-eventイベント、handleEventこれは親コンポーネントで定義されたメソッドであり、イベントがトリガーされるとこのメソッドが呼び出されます。

包括的な例

親コンポーネントがあると仮定しますParentComponentそしてサブコンポーネントChildComponent、親コンポーネントは子コンポーネントにデータを渡す必要があり、子コンポーネントは特定の操作の後に親コンポーネントに通知する必要があります。

親コンポーネントParentComponent.vue

  1. <template>
  2.    <ChildComponent :my-prop="parentData" @child-event="handleChildEvent" />
  3. </template>
  4.  
  5. <script setup>
  6. import { ref } from 'vue';
  7. import ChildComponent from './ChildComponent.vue';
  8.  
  9. const parentData = ref('initial data');
  10. const handleChildEvent = (data) => {
  11.    console.log('Received data from child:', data);
  12. };
  13. </script>

サブアセンブリChildComponent.vue

  1. <template>
  2.    <button @click="sendDataToParent">Send Data to Parent</button>
  3. </template>
  4.  
  5. <script setup>
  6. import { defineProps, defineEmits } from 'vue';
  7.  
  8. const props = defineProps({
  9.    myProp: String
  10. });
  11.  
  12. const emit = defineEmits(['child-event']);
  13.  
  14. function sendDataToParent() {
  15.    emit('child-event', props.myProp);
  16. }
  17. </script>

この例では、親コンポーネントは次のように渡します。:my-propデータを子コンポーネントに渡して渡す@child-event子コンポーネントによって発行されたイベントをリッスンします。子コンポーネントのパスdefineProps親コンポーネントによって渡されたコンテンツを受け取りますmyProp、ボタンクリックイベントで使用しますemitデータを親コンポーネントに送信します。

Pinia (Vue 3 の状態管理ライブラリ) の使用

ピニアのメリットと特徴

Pinia は、Vue 3 で公式に推奨される状態管理ライブラリです。これは、アプリケーションの状態を管理するコンポーネントベースの方法を提供します。 Pinia の主な利点と機能の一部を以下に示します。

  • コンポーネントAPI: Pinia はコンポーネントベースの API を採用し、状態管理とコンポーネント ロジックをより自然に分離します。
  • TypeScript のサポート: Pinia は当初から TypeScript のサポートを検討しており、TypeScript で開発する際の型推論とエディターのサポートを改善しました。
  • モジュラー: Pinia を使用すると、状態を複数のストアに分割でき、各ストアは独自の状態とロジックを独立して管理できます。
  • 複合API対応: Pinia は Vue 3 の複合 API と完全に統合されており、状態管理とコンポーネント ロジックをより自然に分離できます。
  • タイムトラベルのデバッグ: Pinia はタイム トラベル デバッグ機能を提供し、開発者が状態の変化を簡単に遡って検査できるようにします。
Pinia の設定と使用方法

Pinia の使用を開始するには、まず Pinia をインストールする必要があります。

npm install pinia

または糸を使用します。

yarn add pinia

次に、Vue アプリケーションで Pinia をセットアップします。

  1. import { createPinia } from 'pinia';
  2.  
  3. const pinia = createPinia();
  4. app.use(pinia);

ストアを作成します。

  1. import { defineStore } from 'pinia';
  2.  
  3. export const useCounterStore = defineStore('counter', () => {
  4.     const count = ref(0);
  5.  
  6.     function increment() {
  7.         count.value++;
  8.     }
  9.  
  10.     return { count, increment };
  11. });

コンポーネント内のストアを使用します。

  1. <script setup>
  2. import { useCounterStore } from '@/stores/counter';
  3.  
  4. const counterStore = useCounterStore();
  5. </script>
  6.  
  7. <template>
  8.     <div>
  9.         <p>Count: {{ counterStore.count }}</p>
  10.         <button @click="counterStore.increment">Increment</button>
  11.     </div>
  12. </template>
Pinia とコンポーネントの統合

Pinia とコンポーネントの統合は、主に次の方法により非常に簡単です。defineStoreストアを作成する機能。コンポーネントでは、ストア内の状態とメソッドを直接使用できます。

  1. <template>
  2.     <div>
  3.         <p>Count: {{ count }}</p>
  4.         <button @click="increment">Increment</button>
  5.     </div>
  6. </template>
  7.  
  8. <script setup>
  9. import { useCounterStore } from '@/stores/counter';
  10.  
  11.  
  12. const counterStore = useCounterStore();
  13. const { count, increment } = storeToRefs(counterStore);
  14. //如果这里不使用storeToRefs会丢失响应式特性
  15. </script>

上記の例では、テンプレート内で直接アクセスします。countカウンタ値を表示し、ボタンクリックイベントで呼び出します。incrementカウンタ値をインクリメントするメソッド。

Vue 3 独自の通信方式

提供/注入

Provide/Injectの基本的な使い方
Vue3では、provideそしてinjectこれは、コンポーネント階層の深さに関係なく、祖先コンポーネントがそのすべての子孫コンポーネントに依存関係を注入できるようにする、親コンポーネントと子コンポーネント間の通信方法です。

  • データを提供する: 祖先コンポーネントの使用法provide関数はデータを提供します。
  • データの注入: 子孫コンポーネントによって使用されますinject関数はデータを注入します。

Provide/Inject に適用されるシナリオ
provideそしてinject次のシナリオに適用されます。

  • 複数のレイヤーを経由したくない場合propsデータを渡すとき。
  • コンポーネント ツリー内の複数のコンポーネントでデータを共有する場合。

サンプルコード：

  1. // 祖先组件
  2. export default {
  3.   setup() {
  4.     const message = 'Hello from Ancestor!';
  5.     provide('message', message);
  6.   }
  7. }
  8.  
  9. // 子孙组件
  10. export default {
  11.   setup() {
  12.     const message = inject('message');
  13.     return { message };
  14.   }
  15. }
テレポート

テレポートの概念と使用法
Teleportこれは Vue 3 で追加された新しい組み込みコンポーネントであり、コンポーネント内のテンプレートの一部を DOM 内の他の場所に「送信」できます。

コンポーネント通信に Teleport を使用する方法
Teleportこれはコンポーネント間の通信には使用されませんが、コンポーネントのレンダリング位置を制御するために使用されます。しかし、あなたは使うことができますTeleport特別な通信方法は、コンポーネントの一部を親コンポーネントの DOM にレンダリングすることによって実現されます。

サンプルコード：

  1. <!-- 父组件 -->
  2. <template>
  3.   <div>
  4.     <Teleport to="body">
  5.       <ChildComponent />
  6.     </Teleport>
  7.   </div>
  8. </template>
  9.  
  10. <!-- 子组件 -->
  11. <template>
  12.   <div>Some content</div>
  13. </template>
コンポジションAPI

構成 API の概要
Vue 3 では、ロジックを整理して再利用する新しい方法を提供する、Composition API を導入しました。合格setup関数を使用すると、開発者はコンポーネントの応答状態とライフサイクルをより柔軟に制御できます。

コンポーネント間通信には ref と reactive を使用する
refそしてreactiveこれは、レスポンシブ データを作成するための、Composition API のツールです。

  • ref基本的なデータ型を作成するためのリアクティブ参照。
  • reactiveオブジェクトタイプを作成するためのリアクティブな参照。

構成 API での Provide と Inject の使用
構成 API では、provideそしてinject許容できるsetupコンポーネント間の通信を実現するために関数で使用されます。

サンプルコード：

  1. // 祖先组件
  2. import { provide } from 'vue';
  3.  
  4. export default {
  5.   setup() {
  6.     const message = ref('Hello from Ancestor!');
  7.     provide('message', message);
  8.   }
  9. }
  10.  
  11. // 子孙组件
  12. import { inject } from 'vue';
  13.  
  14. export default {
  15.   setup() {
  16.     const message = inject('message');
  17.     return { message };
  18.   }
  19. }

これらの Vue 3 の独自の通信方法により、開発者はコンポーネント間の通信をより柔軟に整理し、コードの保守性と再利用性を向上させることができます。

要約する

Vue 3 では、Composition API が導入されており、コンポーネント通信に新しい柔軟性と強力な機能をもたらします。コンポーネント通信は、フロントエンド開発において複雑なユーザー インターフェイスを構築するための鍵です。これには、親コンポーネントと子コンポーネント、兄弟コンポーネント、祖先コンポーネントと子孫コンポーネント間のデータ転送とイベント トリガーが含まれます。 Vue 3 は、従来のプロップとエミットに加え、新しい Provide/Inject、Teleport、Composition API を含むさまざまな通信メソッドを提供します。

おすすめ関連情報

作成は簡単ではありません。この記事が役に立ったら、「いいね！」を押していただけますか?

個人プロフィール

彼は 30 年以上テクノロジーの研究に専念しており、java、linux、javascript、php、css などのさまざまな言語に堪能であり、オープンソース分野で多くの貢献を行っています。将来の参考のために技術開発におけるいくつかの問題を共有する開発者ドキュメント ステーション。

私の連絡先情報

郵便