vue3祖父调用孙子方法

在Vue 3中，如果你想要在组件的祖父组件中直接调用孙子组件的方法，这通常通过事件总线（Event Bus）或者自定义属性（$emit/$on）来实现。祖父组件可以发射一个全局事件，然后孙子组件订阅这个事件并在接收到后执行相应的方法。

例如，假设祖父组件有一个`callGrandchildMethod`的方法：

// 祖父组件 template
<template>
  <button @click="callGrandChildMethod">调用孙子方法</button>
</template>

<script>
import GrandChildComponent from './GrandChild.vue';

export default {
  components: {
    GrandChildComponent,
  },
  methods: {
    callGrandChildMethod() {
      this.$refs.grandChildComponent.methodToCall();
    },
  },
};
</script>

在这个例子中，`this.$refs.grandChildComponent`引用了孙子组件实例，然后通过`.methodToCall()`调用了孙子组件中定义的方法`methodToCall()`。

孙子组件则需要监听并处理这个事件：

// 孙子组件 template
<template>
  <div ref="methodToCall"></div>
</template>

<script>
export default {
  mounted() {
    // 接收祖父组件传递过来的方法调用
    this.$parent.$on('grandChildMethod', this.methodToCall);
  },
  methods: {
    methodToCall() {
      // 执行孙子组件的方法
      console.log('孙子方法被调用了');
    },
  },
};
</script>

这里的关键在于`$parent.$on`用于接收事件，而`mounted`钩子确保在孙子组件加载完成后能及时接收到祖父发来的消息。