vue3：点击子组件进行父子通信

问：

子组件怎么和爷爷组件通信

回答：

在Vue 3中，子组件和爷爷组件之间的通信可以通过事件冒泡和状态管理来实现。你可以使用Vue的事件系统来传递事件，或者使用全局状态管理库如Vuex或Pinia。以下是一个使用事件冒泡的示例，展示如何在子组件中触发事件，并在爷爷组件中捕获和处理该事件。假设你有以下组件结构：1. 爷爷组件（GrandparentComponent）
2. 父组件（ParentComponent）
3. 子组件（ChildComponent）### 子组件（ChildComponent）<template><div class="child"><button @click="handleClick">点击我</button></div>
</template><script>
import { defineComponent } from 'vue';export default defineComponent({setup(props, { emit }) {const handleClick = () => {emit('toggle');};return {handleClick};}
});
</script>### 父组件（ParentComponent）<template><div class="parent"><ChildComponent @toggle="handleToggle" /></div>
</template><script>
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';export default defineComponent({components: {ChildComponent},setup(props, { emit }) {const handleToggle = () => {emit('toggle');};return {handleToggle};}
});
</script>### 爷爷组件（GrandparentComponent）<template><div class="grandparent"><ParentComponent @toggle="toggleHiddenElement" /><div class="hidden-element" v-if="showHiddenElement">隐藏元素</div></div>
</template><script>
import { defineComponent, ref } from 'vue';
import ParentComponent from './ParentComponent.vue';export default defineComponent({components: {ParentComponent},setup() {const showHiddenElement = ref(false);const toggleHiddenElement = () => {showHiddenElement.value = !showHiddenElement.value;};return {showHiddenElement,toggleHiddenElement};}
});
</script>### 主应用程序<div id="app"><GrandparentComponent />
</div><script src="https://unpkg.com/vue@next"></script>
<script>import { createApp } from 'vue';import GrandparentComponent from './GrandparentComponent.vue';createApp(GrandparentComponent).mount('#app');
</script>### 解释1. **子组件**（`ChildComponent`）：包含一个按钮，当点击按钮时，触发一个自定义事件`toggle`。
2. **父组件**（`ParentComponent`）：包含子组件，并监听子组件的`toggle`事件，然后再次触发一个`toggle`事件传递给爷爷组件。
3. **爷爷组件**（`GrandparentComponent`）：包含父组件，并监听父组件的`toggle`事件，切换`showHiddenElement`的值，从而控制隐藏元素的显示和隐藏。这样，当你点击子组件中的按钮时，事件会冒泡到爷爷组件，并切换隐藏元素的显示状态。再点一次按钮，隐藏元素会再次隐藏。