Vueを学ぶ

第4章. コンポーネント間の相互作用

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

章では、ライフサイクル・フック、計算プロパティ、ウォッチャー、メソッド、その他の機能を使ってコンポーネントを構成する方法について深く掘り下げた。また、スロットの威力と、propsを使って他のコンポーネントから外部データを受け取る方法についても学んだ。

この章では、その基礎に基づき、カスタムイベントとprovide/injectパターンを使ってコンポーネント間のインタラクションを構築する方法を説明する。また、Teleport APIも紹介する。Teleport APIを使うと、Vueコンポーネント内で出現順序を保ったまま要素をDOMツリー内で移動させることができる。

Vueの入れ子コンポーネントとデータフロー

Vueコンポーネントは、その内部に他のVueコンポーネントをネストすることができる。この機能は、複雑なUIプロジェクトにおいて、ユーザがコードをより小さく、管理しやすく、再利用可能な部分に組織化するのに便利である。ネストされた要素を子コンポーネント、それを含むコンポーネントを親コンポーネント と呼び出す。

つまり、親コンポーネントは子コンポーネントにデータを渡すことができるが、その逆はできない。親コンポーネントはprops を使って子コンポーネントにデータを渡すことができ（「Options API の探索」で簡単に説明）、子コンポーネントはカスタム・イベントemits を使って親コンポーネントにイベントを返すことができる。図4-1はコンポーネント間のデータの流れを示している 。

図4-1. Vueコンポーネントにおける一方向のデータフロー

関数をプロップとして渡す

他のフレームワークとは異なり、Vueでは関数を子コンポーネントにpropとして渡すことはできない。その代わりに、関数をカスタム・イベント・エミッターとしてバインドすることができる（「カスタム・イベントを使ったコンポーネント間の通信」を参照） .

プロップを使って子コンポーネントにデータを渡す

オブジェクトまたは配列の形で、Vueコンポーネントのprops フィールドには、コンポーネントが親から受け取ることができるすべての利用可能なデータプロパティが含まれる。props の各プロパティは、ターゲット・コンポーネントのpropである。親からデータの受信を開始するには、例 4-1 に示すように、コンポーネントのオプション・オブジェクトでprops フィールドを宣言する必要がある。

例4-1. コンポーネントで小道具を定義する

export default {
  name: 'ChildComponent',
  props: {
    name: String
  }
}

例4-1では、ChildComponent コンポーネントは、String 型のname プロップを受け取る。親コンポーネントは、例4-2 に示すように、このname プロップを使用して子コンポーネントにデータを渡すことができる。

例 4-2. 静的データを子コンポーネントにpropsとして渡す

<template>
  <ChildComponent ...