この Vue 3 アプリケーションの孫コンポーネントのブール変数の値を変更するにはどうすればよいですか?

Question

私は Vue 3 アプリケーションを開発しています。ネストされたコンポーネントが 3 つあります。ボタン コンポーネントはナビゲーション コンポーネント内にネストされ、ナビゲーション コンポーネントはコンテンツ コンポーネント内にネストされています。

このボタンは、親コンポーネント Main.vue (コンテンツ コンポーネント) 内のブール変数 isVisible の値を切り替える必要があります。

Sun コンポーネントの場合 MyButton.vue:

リーリー

親コンポーネント内 Navigation.vue:

リーリー

祖父母コンポーネント内Main.vue:

リーリー ＃＃＃質問＃＃＃

上に示すように、一度に

1 つのコンポーネント

ずつ上向きに発射してみました。 理解できない理由により、この

は機能しません

。 ＃＃＃質問＃＃＃

私の間違いはどこですか?

可能な限り最短の解決策は何ですか?

Answer 1

#1 親の Navigation コンポーネントで MyButton コンポーネントを宣言していません。
エクスポートのデフォルト {}

に追加します。 リーリー

#2 祖父母の Main コンポーネントでイベントをリッスンしていません。
行 <Navigation /> を次のように置き換えます:

リーリー

追記: カスタム イベントの場合は、kebab-case を使用することをお勧めします。単なるベストプラクティスです。 toggleVisibility の代わりに toggle-visibility