vue3.0 父组件调用子组件方法

在 Vue 3.0 中，你可以使用 `ref` 和 `teleport` 来实现父组件调用子组件的方法。

首先，在子组件中，你需要定义一个可调用的方法，并将其包裹在 `ref` 中。例如：

// 子组件
<template>
  <div>
    <button @click="sayHello">Click me</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const sayHello = () => {
      console.log('Hello from child component');
    };

    return {
      sayHello: ref(sayHello),
    };
  },
};
</script>

然后，在父组件中，你可以通过 `ref` 的 `.value` 属性来调用子组件的方法。例如：

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent ref="childComponent" />
    <button @click="callChildMethod">Call child method</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const childComponent = ref(null);

    const callChildMethod = () => {
      childComponent.value.sayHello();
    };

    return {
      childComponent,
      callChildMethod,
    };
  },
};
</script>

这样，当你在父组件中点击 "Call child method" 按钮时，就会触发子组件中的 `sayHello` 方法，并在控制台输出 "Hello from child component"。