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

Question

私は Vue には比較的慣れておらず、最初のプロジェクトに取り組んでいます。複数の子コンポーネントと孫コンポーネントを含むフォームを作成しようとしています。フォームの複数のコピーを生成できる必要があるという問題に遭遇しました。したがって、いくつかのデータ属性を 1 レベル上に移動しました。現在、フォームは ApplicationPage.Vue > TheApplication.Vue > PersonalInformation.Vue > BaseInput.Vue です。私の問題は、 TheApplication を介して PersonalInformation から ApplicationPage に変更を発行する必要があることです。この状況にどう対処すればいいのか分からず困っています。 Vue2 のソリューションを探していますが、Vue3 のソリューションは見つかりませんでした。

ApplicationPage.vue

リーリー

TheApplication.Vue

リーリー リーリー

個人情報.vue

リーリー リーリー

Answer 1

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

サブアイテム

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

Child.vue

リーリー

または使用方法:

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

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

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

Parent.vue

リーリー リーリー

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

GrandParent.vue

リーリー

Answer 2

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

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

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

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

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

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

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

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