您现在的位置是：首页 >技术交流 >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`的值，从而控制隐藏元素的显示和隐藏。

这样，当你点击子组件中的按钮时，事件会冒泡到爷爷组件，并切换隐藏元素的显示状态。再点一次按钮，隐藏元素会再次隐藏。