VueJs 3 の祖父母コンポーネントはイベントをその祖父母コンポーネントに送信します

Question

私は Vue には比較的慣れておらず、最初のプロジェクトに取り組んでいます。複数の子コンポーネントと孫コンポーネントを含むフォームを作成しようとしています。フォームの複数のコピーを生成できる必要があるという問題に遭遇しました。したがって、いくつかのデータ属性を 1 レベル上に移動しました。現在、フォームは ApplicationPage.Vue>TheApplication.Vue>PersonalInformation.Vue>BaseInput.Vue です。私の問題は、TheApplicat に合格する必要があることです

P粉037880905 · Answer

イベントの発行を連鎖したくない人のために、イベントの発行にも使用できる子オブジェクト上に親オブジェクトがあります。コンソールでの警告を避けるために、必ず親に起動を登録してください。

サブアイテム

ここで直接の親の $emit を呼び出します。

Child.vue

リーリー

または使用方法:

リーリーリーリー＃＃＃父親＃＃＃

祖先にシグナルを送るのは親であるため、ここで放出を宣言します。

の場合は、 メソッドを使用してエミットを宣言するだけです。 ドキュメントを参照してください。

Parent.vue

リーリーリーリー

を使用する場合リーリー＃＃＃祖父母＃＃＃次に、祖父母コンポーネントでイベントをリッスンします。

GrandParent.vue

リーリー

P粉842215006 · Answer

これが私のやり方です: codesandbox

Emits は、出力される名前と出力される値の 2 つのパラメーターのみを受け入れます。複数の値が出力される場合、それらは単一のオブジェクトとして出力される必要があります。私のソリューションでは、孫コンポーネントはフィールド名と値を単一のオブジェクトとして出力します

＃＃＃＃＃＃孫＃＃＃＃＃＃リーリーリーリー

子オブジェクトはキャプチャして再出力しますが、 は最初に、親コンポーネントが期待する形式で出力するように注意します (これには data.primary

オブジェクト全体が必要です。これは、それが目的であるためです) v モデルに設定されます)

＃＃＃＃＃＃子供＃＃＃＃＃＃リーリーリーリー その後、親コンポーネントは v-model data.primary オブジェクトを自動的に受信して更新します。

または 、Vue の公式状態管理ライブラリである Pinia

をいつでも使用できることを言及しなければなりません (あるコンポーネントにある状態を保存し、他のコンポーネントから同じ状態を読み取ることができます)状態）。確かに学習曲線はありますが、学ぶ価値は間違いなくあり、この種の状況を簡素化するように設計されています。