이 Vue 3 애플리케이션에서 손자 구성 요소의 부울 변수 값을 어떻게 변경합니까?

Question

저는 Vue 3 애플리케이션을 개발 중입니다. 3개의 중첩된 구성 요소가 있습니다. 버튼 구성 요소는 콘텐츠 구성 요소 내에 중첩된 탐색 구성 요소 내에 중첩되어 있습니다.

버튼은 상위 구성 요소의 값을 전환해야 합니다 Main.vue（内容组件）内布尔变量 isVisible.

In Sun 구성 요소 MyButton.vue:

으아아아

상위 구성 요소에서 Navigation.vue:

으아아아

조부모 구성 요소에서 Main.vue:

으아아아

질문

위와 같이 한 번에 한 구성요소씩 위쪽으로 발사해 보았습니다.

이해할 수 없는 이유로 작동하지 않습니다.

질문

1. 내 실수는 어디에 있나요?
2. 가장 짧은 솔루션은 무엇입니까?

Answer 1

#1 상위 Navigation 组件中声明 MyButton 구성 요소가 없습니다.
export 默认 {}

에 추가하세요 으아아아

#2 조부모 Main 구성 요소의 이벤트를 듣고 있지 않습니다.
<Navigation /> 줄을 다음으로 바꾸세요:

으아아아

P.S: 맞춤 이벤트의 경우 kebab-case。只是一个最佳实践。 toggle-visiblity 而不是 toggleVisibility

을 사용하는 것이 좋습니다.