vue3 <script setup>语法糖中 父组件如何调用子组件的方法举个例子

在Vue3中，可以使用组件的ref属性来获取子组件的实例，然后通过该实例调用子组件的方法。下面是一个例子：
假设我们有一个父组件Parent和一个子组件Child，Child组件中有一个changeNum方法，我们想在Parent组件中调用该方法。
Child组件代码如下：
<template>
<div>
<p>子组件中的数字：{{ num }}</p>
</div>
</template>

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

let num = ref(0)

function changeNum() {
num.value++
}

export { num, changeNum }
</script>
登录后复制
Parent组件代码如下：
<template>
<div>
<p>父组件中的数字：{{ num }}</p>
<Child ref="child" />
<button @click="changeChildNum">点击调用子组件中的方法</button>
</div>
</template>

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

let num = ref(0)
let child = ref()

function changeChildNum() {
child.value.changeNum()
}

export { num, child, changeChildNum }
</script>
登录后复制
在Parent组件中，我们首先引入了Child组件，并使用ref属性获取了Child组件的实例。然后在changeChildNum方法中，通过child.value.changeNum()调用了Child组件中的changeNum方法。
注意，在使用ref属性获取子组件实例时，需要在子组件的标签上添加ref属性，如上例中的。