Vueコンポーネント通信方法事例まとめ

1. 親コンポーネントが子コンポーネントに値を渡す（props）

ステップ：

親コンポーネントのv-bindを介して子コンポーネントにデータを渡す
親コンポーネントから子コンポーネントのpropsを通じて渡されたデータを受け取る

<div id="アプリ">
	<!-- 1. v-bind を通じて子コンポーネントにデータを渡す -->
    <テスト v-bind:ss='名前'></テスト>
</div>

<スクリプト>
    var a = 新しい Vue({
        el:'#app',
        データ：{
            名前:'bing',
        },
        コンポーネント:
            テスト：{
                props: ['ss'], // 2. 親コンポーネントから渡されたデータを受け取る template: "<p>{{ss}}</p>"
            }
        }
    })
</スクリプト>

Props は親要素と子要素間の單向數據流を作成します。親要素が更新されると、子要素の状態もそれに応じて変化します。
しかし、その逆の場合、アプリケーションのデータフローが理解しにくくなり、親コンポーネントのデータを子コンポーネントで変更できなくなります。

2. サブコンポーネントは親コンポーネントに値を渡す（$emit）

子コンポーネントは$emitイベントを通じて親コンポーネントにメッセージを送信し、独自のデータを親コンポーネントに渡します。

ステップ：

clickイベントを子コンポーネントにバインドして、 incrementメソッドをトリガーします。
incrementメソッドでは、 $emitを使用してカスタムイベントのincrementを定義し、 this.counterパラメータを渡します。
ステップ2のカスタムincrementイベントを親コンポーネントにバインドします。メソッド名はincrementTotalです。
親コンポーネントのステップ 3 でincrementTotalメソッドを呼び出します。すると、 incrementTotalメソッドは子コンポーネントから渡されたパラメータを受け取ることができます。

<div id="アプリ">
    <p>{{ 合計 }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter> <!-- ステップ 3 -->
</div>

<スクリプト>
    Vue.component('ボタンカウンター', {
        テンプレート: '<button v-on:click="increment">{{ counter }}</button>', // ステップ 1
        データ: 関数 () {
            戻る {
                カウンター: 'サブコンポーネントデータ'
            } 
        },
        メソッド: {
            増分: 関数 () {
                this.$emit('increment', this.counter); // ステップ2
            }
        }
    });


    新しいVue({
        el: '#app',
        データ： {
            合計: '親コンポーネントデータ:'
        },
        メソッド: {
            incrementTotal: function (e) { // ステップ4
                this.total = this.total + e[0]
                コンソールログ(e);
            }
        }
    })
</スクリプト>

3. ブラザーコンポーネント値伝送（EventBus）

コンポーネント間のデータ通信を処理するために Vuex のようなライブラリが必要ない場合は、Vue のEventBus を使用して通信することを検討できます。

Vue では、すべてのコンポーネントが同じイベントセンターを共有するのと同じように、 EventBus通信ブリッジとして使用し、センターからイベントを送受信するように登録できるため、コンポーネントは他のコンポーネントに並行して通知できます。
しかし、便利すぎるため、不用意に使用すると、メンテナンスが困難な「災害」を引き起こす可能性があります。そのため、通知の概念を共有状態レベルに引き上げるための状態管理センターとして、より完全な Vuex が必要です。

この方法は、$emit イベントの処理センター (イベントバス) として空の vue インスタンスを作成し、それを介してイベントをトリガーおよびリッスンし、親子、兄弟、世代間コンポーネントを含む任意のコンポーネント間の通信を簡単に実現します。詳細は以下の通りです。

1. 初期化（new Vue()）

まず、イベントバスを作成してエクスポートし、他のモジュールがそれを使用したりリッスンしたりできるようにする必要があります。
これには2つの方法で対処できます。

方法1:新しいevent-bus.jsファイルを作成する

// イベントバス.js
'vue' から Vue をインポートします
エクスポート const EventBus = new Vue()

方法2:プロジェクトのmain.jsでEventBusを直接初期化する

// メイン.js
Vue.prototype.$EventBus = new Vue() // 注意: この方法で初期化されたEventBusはグローバルイベントバスです

これでEventBusが作成されたので、それをコンポーネントにロードし、親コンポーネントと子コンポーネント間でメッセージを渡すときと同じメソッドを呼び出すだけです。

2. イベントの送信 ($emit())

通信する必要がある 2 つの Vue ページ (A と B) があるとします。ページ A では、クリックイベントがボタンにバインドされ、ページ B に通知するメッセージが送信されます。

<!-- A.vue -->
<テンプレート>
    <button @click="sendMsg()">-</button>
</テンプレート>

<スクリプト> 
「../event-bus.js」から EventBus をインポートします。
エクスポートデフォルト{
  メソッド: {
    送信メッセージ() {
      EventBus.$emit("aMsg", 'ページ A からのメッセージ'); // データを外部に送信する}
  }
}; 
</スクリプト>

3. イベントを受信する ($on())

次に、ページ B でこのメッセージを受信する必要があります。

<!-- B.vue -->
<テンプレート>
	<p>{{メッセージ}}</p>
</テンプレート>

<スクリプト> 
「../event-bus.js」から EventBus をインポートします。
エクスポートデフォルト{
	データ（） {
		戻る {
			メッセージ: ''
		}
	},
	マウント() {
		EventBus.$on("aMsg", (msg) => { // A から送信されたメッセージを受信します this.msg = msg;
		});
	}
};
</スクリプト>

4. イベントリスナーを削除する

前述のように、不適切に使用すると、EventBus は大惨事になる可能性があります。どのような「大惨事」なのでしょうか?誰もが知っているように、vue はシングルページアプリケーションです。ページを更新すると、関連する EventBus が削除され、ビジネスが停止します。また、業務に繰り返し操作するページがある場合、監視時に何度も EventBus が起動されることになり、これも非常に大きな隠れた危険性となります。このとき、EventBusとプロジェクトの関係を適切に処理する必要があります。これは通常、vue ページが破棄されたときに EventBus イベントリスナーを削除するために使用されます。

イベントリスナーを削除する場合は、次のようにします。

「../event-bus.js」から EventBus をインポートします。
イベントバス.$off('aMsg', {})

EventBus.$off('aMsg')アプリケーション内のこのイベントのすべてのリスナーを削除します。
または、 EventBus.$off()を直接呼び出して、パラメータを追加せずにすべてのイベントチャネルを削除することもできます。

4. ヴュークス

複数人での共同開発やログイン状態のグローバルな維持管理が必要な中規模から大規模のシングルページアプリケーションを作成する場合は、状態管理に vuex を選択するのが最適です。

Vuex詳細説明ポータル

Vueコンポーネントの通信方法の事例まとめの記事はこれで終わりです。より関連性の高いVueコンポーネントの通信方法まとめについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様、今後とも123WORDPRESS.COMをよろしくお願いいたします！

以下もご興味があるかもしれません: