Vueコンポーネント通信のさまざまな方法の詳細な説明

コンポーネント通信に関しては、おそらく誰もがよく知っている 5 つのタイプがあります。

1. 父から息子へ

親コンポーネントはカスタム属性を通じて子コンポーネントに値を渡し、子コンポーネントはpropsを使用して値を受け取ります。

2. 息子から父へ

親コンポーネントは子コンポーネントタグのイベントをカスタマイズし、子コンポーネントは$emitを通じてカスタムイベントをトリガーし、パラメータを渡すことができる。

3. 親子関係のないコンポーネントの値の転送

eventBus イベント バス:

情報はeventBusを通じて公開および購読できます（誰でもアクセスできるイベントバスを作成します）

4. ヴュークス

Vuex は、Vue.js アプリケーション専用に開発された状態管理モードです。集中型ストレージ マネージャーを使用して、プログラムのすべてのコンポーネントの状態を管理し、複数のコンポーネント間の通信を解決します。ただし、これは主に中規模および大規模プロジェクトで使用されるため、小規模プロジェクトでは肥大化して見えることになります。

5. 参照

refと·$refs·を追加することで、子コンポーネントを簡単に取得し、子コンポーネントのプロパティとメソッドにアクセスすることもできます。refsに関しては、詳細な使用法を記載した別の記事も書いています。refsの使用法

上記の 5 つに加えて、あまり一般的ではない 5 つのコンポーネント通信方法があります。

6. 子供

親コンポーネントでは、$childrenはコンポーネントコレクションを返します。子コンポーネントの順序がわかっている場合は、添え字演算を使用することもできます。

7. $親

子コンポーネントではthis.$parent親コンポーネントを指します。子コンポーネントは親コンポーネントのデータを直接変更することはできません。 this.$parent を使用すると、親コンポーネントがデータを変更できるようになります。

例えば：

this.$parent.xxx=200

this.$parent.fn()

8. 提供と注入

ペアで表示されます: provide と inject はペアで表示されます

機能: 親コンポーネントが子孫コンポーネントにデータを渡すために使用します

方向：

• 親コンポーネントに提供し、従属コンポーネントに渡すデータを返します
• inject は、このデータを使用する必要のある子孫コンポーネントにデータを挿入します。 （コンポーネント階層の深さに関係なく）
  

9. $属性

親コンポーネントが孫コンポーネントにデータを渡すために使用します。

10. $リスナー

孫コンポーネントが親コンポーネントにデータを渡すために使用します。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。