I.はじめに
以前、親コンポーネントと子コンポーネントの間でパラメータを渡す方法を3つまとめましたので、興味のある方は前回の記事 [ vue2] 子コンポーネントから親コンポーネントへパラメータを渡す方法のまとめ - Programmer Sought
ここで、兄弟コンポーネント間でパラメーターを渡す方法をまとめましょう。[Event Bus] と [Message Subscription and Publishing] の 2 つの方法があります。
2. イベントバス
1 はじめに
main.js にプロトタイプ属性を中間値として定義し、兄弟コンポーネント間でトリガーし、受信することでデータ通信が完了します。データを受信するコンポーネントはカスタム イベントをバインドし、データを送信するコンポーネントはカスタム イベントをトリガーします
2.ケース
学校コンポーネントと学生コンポーネントを定義します。生徒がボタンをクリックすると、生徒数が学校コンポーネントに送信されます。
3. 実装手順
(1) グローバルイベントバスを定義する
main.js で定義され、$bus には任意の名前を付けることができます
(2) 学校コンポーネントでイベントをバインドする
ページが読み込まれたときにイベントをバインドします。このステートメントは、getNum メソッドがトリガーされたときに、コールバック関数 getSchookNum が実行されることを意味します。
(3) 学生コンポーネントでトリガー
(4) レンダリング
3. ニュースの購読と発行
1 はじめに
サードパーティ ライブラリの助けを借りて購読および公開する. データを必要とする人は誰でもメッセージを購読し、データを提供する人は誰でもメッセージを公開します. これは、pubsub.js を使用して実装されます。他のライブラリを選択することもできます
2.ケース
上記の場合も使用します
3. 手順
(1) サードパーティのライブラリをインストールする
(2) サードパーティ ライブラリの導入
2 つのコンポーネントで導入: 「pubsub-js」から pubsub をインポート
(3) ニュースの購読と購読解除
メッセージを購読するには、subscribe メソッドを使用します。最初のパラメーターはメッセージ名で、2 番目のパラメーターはコールバック関数です。
ただし、コールバック関数を第 2 パラメータとして直接記述する場合は、アロー関数を記述してください。そうしないと、これはコンポーネント インスタンス オブジェクトを表さず、未定義になります。
購読解除時は、メッセージのIDです。メッセージ サブスクリプションが生成されるたびに、一意の ID が割り当てられます。
(4) リリースのお知らせ
publish を使用してメッセージをパブリッシュします。最初のパラメーターはメッセージ名で、受信側と一致する必要があり、2 番目のパラメーターは渡されたデータです。
(4) 効果
4.まとめ
以上が兄弟コンポーネント間の通信方法で、「いいね」「コメント」「ブックマーク」をよろしくお願いします。