如何在vuejs中使用<component>上的ref？

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">Show Component A</button>
    <button @click="currentComponent = 'ComponentB'">Show Component B</button>
    <component :is="currentComponent" ref="dynamicComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    callChildMethod(methodName) {
      // 使用$refs获取子组件实例并调用其方法
      this.$refs.dynamicComponent[methodName]();
    }
  }
};
</script>

<!-- ComponentA.vue -->
<script>
export default {
  methods: {
    sayHello() {
      console.log('Hello from Component A');
    }
  }
};
</script>

<!-- ComponentB.vue -->
<script>
export default {
  methods: {
    sayGoodbye() {
      console.log('Goodbye from Component B');
    }
  }
};
</script>

this.callChildMethod('sayHello'); // 如果当前显示的是ComponentA
this.callChildMethod('sayGoodbye'); // 如果当前显示的是ComponentB

this.$nextTick(() => {
  if (this.$refs.dynamicComponent) {
    this.$refs.dynamicComponent.sayHello();
  }
});