vue3父组件调用子组件函数

在Vue 3中，父组件调用子组件函数有几种方法可以实现。一种常用的方法是使用`ref`和`defineExpose`。

首先，在父组件中，我们需要定义一个方法，通过`ref`获取子组件的引用。然后，通过引用调用子组件的方法。下面是一个示例代码：

<template>
  <Child ref="childRef"></Child>
  <button @click="callChildMethod">调用子组件方法</button>
</template>

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const childRef = ref();

const callChildMethod = () => {
  childRef.value.childMethod();
};
</script>

在子组件中，我们需要使用`defineExpose`将需要暴露给父组件调用的方法进行暴露。下面是一个示例代码：

<script setup>
import { defineExpose } from 'vue';

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

defineExpose({
  childMethod,
});
</script>

通过以上方法，在父组件中调用子组件的方法就可以实现了。在点击按钮时，子组件的方法会被调用，并在控制台输出相应信息。＊＊＊html#defineexpose<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>