0

vue.js の共通コンポーネントが異なる親コンポーネントと通信する場合のベスト プラクティスについて質問があります。

たとえば、私のシナリオでは、基本的なモーダル コンポーネントが「close」メソッドをトリガーしますが、2 つの異なる親コンポーネントがあります。

私は2つの解決策を見つけました：

  1. 親は追加のプロップを渡す必要があり、baisc コンポーネントは、イベントの名前がプロップ値であるイベントをトリガーするだけなので、アタッチされたリスナー親コンポーネントを呼び出すことができます

  2. 基本的なモーダルでは、 this.$parent を使用して親コンポーネントのメソッドにアクセスするか、 this.$parent.trigger('xxx') を使用するだけで、親は何をすべきかを知ることができます

しかし、上記の両方ともあまり良くないと思います.最初のものは追加の小道具を渡す必要があるかもしれません. そして 2 番目は、よりハードコードされているように感じられるかもしれません。

では、この場合、より良い解決策はありますか?

4

1 に答える 1

0

this.$dispatch('eventName', data)(Vue 2.x の場合は を使用) を使用this.$emit('eventName', data)して、任意の親、祖父母、さらにチェーンの上流にイベントをトリガーします ( this.$broadcast('eventName', data)Vue < 2.x ではチェーンの下流にイベントをトリガーするために使用できます)。

親に「eventName」というイベントがある場合、このイベントが発生します。

複数の親がいる場合は、それぞれに異なるイベントを与え、子からディスパッチを介してこの特定のイベントを発生させることができます。また、各親に同じイベントを与え、親が何をすべきかを指定する data prop を渡すこともできます。3 番目のオプションは、特定の親を参照することです。

var parent = new Vue({ el: '#parent' })
// access child component instance
parent.$refs.eventName()

各オプションには長所と短所があります。最適なソリューションは、コンテキストによって異なります。しかし、一般的に最善の解決策はオプション 1 だと思います。その場合、追加のデータ パラメータは必要ありません。オプション 3 は疎結合ではありません。

詳細情報: https://vuejs.org/guide/components.html

于 2016-07-04T09:40:06.267 に答える