vue3如何使用自定义组件内的方法？

在vue2中我们自定义组件的方法在父组件中使用时可以使用this.$refs.方法名的方式进行使用

而在vue3中想使用自定义组件中的方法或者值时需要使用 编译器宏将方法和值暴露出来

具体说明看文档 单文件组件 <script setup> | Vue.js

示例：

<template>
    给子组件起个名字吧=>{{name}}
</template>
<script setup>
import { ref, defineExpose} from 'vue'
const name = ref('')
const setName = (v) => {
  name.value = v
}
defineExpose({
  setName 
})
</script>
<style lang="scss" scoped></style>

<template>
     <child ref="child"></child>
</template>
<script setup>
import { ref } from 'vue'
// ...引入组件
const child = ref(null)
// 这里的ref(null) = this.$refs vue3中使用refs需要在底部声明

// 使用子组件的方法
child.value.setName('小组件')

</script>
<style lang="scss" scoped></style>