vue3父组件控制孙子组件触发事件

在Vue 3中，可以通过使用`$refs`来实现父组件控制孙子组件触发事件的功能。下面是一个简单的示例：

<template>
  <div>
    <button @click="triggerEvent">触发孙子组件事件</button>
    <grandparent-component ref="grandparent"></grandparent-component>
  </div>
</template>

<script>
import GrandparentComponent from "./GrandparentComponent.vue";

export default {
  components: {
    GrandparentComponent,
  },
  methods: {
    triggerEvent() {
      this.$refs.grandparent.triggerEvent();
    },
  },
};
</script>

在上述示例中，父组件通过`$refs`获取到孙子组件的实例，并调用该实例上的`triggerEvent`方法来触发孙子组件的事件。

然后，在孙子组件中，你需要定义相应的事件和方法，例如：

<template>
  <div>
    <button @click="doSomething">孙子组件按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    doSomething() {
      // 孙子组件触发的事件逻辑
    },
  },
};
</script>

这样，当你点击父组件中的按钮时，就会通过`$refs`找到孙子组件并调用它的`triggerEvent`方法，进而触发孙子组件中定义的事件逻辑。