javascript - vueでのコンポーネント分割と組み合わせ使用の問題

Question

私は Vue を初めて使用します。現在、グリッド コンポーネントとダイアログ コンポーネントを使用して小さな演習を行っています。グリッドの各行に削除ボタンがあり、クリックすると、削除するかどうかを確認するポップアップ ウィンドウが表示されます。 gird コンポーネントは次のとおりです:

ダイアログ コンポーネントの図は以下のとおりです:

App.vue で vue インスタンスを作成し、グリッド コンポーネントを導入します。ダイアログを App.vue に導入する必要があるのか​​、グリッドに導入する必要があるのか​​わかりません。グリッドに導入すると、ダイアログとグリッドが深く結びつきすぎてしまうのではないか？アプリ内にダイアログを導入した場合、ダイアログを表示するかどうかの制御はアプリ側で制御する必要がありますが、ダイアログを閉じるのはダイアログ側で制御すべきだと感じます。
私の現在のアプローチは、App.vue に gird とダイアログをそれぞれ導入することです。削除ボタンをクリックすると、gird でイベントが発行され、そのイベントはアプリで監視され、ダイアログを表示するかどうかを制御する値が設定されます。 true に変更されます。ダイアログを閉じるボタンがクリックされるとイベントが発行され、アプリはイベントをリッスンし、ダイアログを表示するかどうかを制御する値を false に変更します。このような扱いはしてはいけないような気がします。
コンポーネントをより適切に分割および結合する方法について先輩からアドバイスをお願いします。ありがとう！

Answer 1

v-modelを使用してダイアログを入力として「偽装」し、親子双方向データフローを実現します

サブコンポーネント:

リーリー

父:

リーリー

このようにして、親は showDialog を非表示/表示に変更し、子コンポーネントで close を呼び出すと showDialog の値も更新されます

公式ドキュメント https://cn.vuejs.org/v2/guide... カスタムイベントを利用したフォーム入力コンポーネント