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

在 Vue 3.2 中，你可以通过使用 `ref` 和 `teleport` 来实现父组件调用子组件的方法。下面是一个示例：

在子组件中，你需要使用 `ref` 来创建一个引用，并将它暴露给父组件。然后，在子组件中，你可以通过 `teleport` 将子组件的方法绑定到引用上。这样，父组件就可以通过引用来调用子组件的方法了。

下面是一个示例代码：

// 子组件 Child.vue
<template>
<div>
<button @click="childMethod">子组件方法</button>
</div>
</template>

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

export default {
setup() {
const childMethod = () => {
console.log('子组件方法被调用了');
};

const childMethodRef = ref(childMethod);

teleport(() => {
return { childMethodRef };
});

return {
childMethod
};
}
};
</script>

在父组件中，你可以通过 `$refs` 来访问子组件的引用，并调用子组件的方法。

// 父组件 Parent.vue
<template>
<div>
<button @click="callChildMethod">调用子组件方法</button>
<child ref="childRef"></child>
</div>
</template>

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

export default {
setup() {
const childRef = ref(null);

const callChildMethod = () => {
if (childRef.value) {
childRef.value.childMethodRef();
}
};

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

在上面的示例中，我们在父组件中创建了一个子组件的引用 `childRef`，然后通过 `this.$refs.childRef.childMethodRef()` 调用子组件的方法。

注意：在 Vue 3 中，需要使用 `ref` 来创建引用，而不是像 Vue 2 中那样使用 `$refs`。