vue3 component父调用子组件方法

在Vue3中，父组件可以通过expose和ref来调用子组件的方法。首先，在父组件中使用ref指令关联子组件，通过定义子组件实例并命名为childComp。然后，可以通过childComp.value来访问子组件的方法和数据。例如，可以通过childComp.value.play()来调用子组件的play方法。此外，还可以通过childComp.value.state.title来获取子组件的title数据。这样，父组件就可以轻松地调用子组件的方法了。

举个例子，在父组件的template中可以这样写：
<template>
<div class="parent">
<child ref="childComp"></child>
<button @click="onTry">点击试一试</button>
</div>
</template>

然后，在script setup中，可以这样定义子组件实例和调用子组件方法：
<script setup>
import { ref } from "vue";
import child from "./child.vue";

const childComp = ref(null);

const onTry = () => {
let msg = childComp.value.state.title;
childComp.value.play();
};
</script>

这样，当点击“点击试一试”按钮时，父组件就可以调用子组件的方法了。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>