vue3 <script setup> 执行子组件里的方法函数

在搞自定义组件开发的时候，遇到的问题，vue2时，子组件里的方法函数，可以直接通过 this.$refs.xxx.xxxx() 来执行，但在vue3中，尤其是 <script setup> 中，是不允许这样的，由于 <script setup> 目前没啥文档，相关资料，不太好找，最后再github反馈，才找到解决方案，这个方案，很简单，实际上，就是vue2的思维，没转换过来。

---

自定义组件

<template>
  <div>test</div>
</template>
<script lang="ts" setup>
function testLog() {
    console.log('11')
    return '22';
}
</script>

---

使用自定义组件

<template>
	<div>
		<test-a ref="child"/>
		<button @click="testClick">test</button>
	</div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
const child = ref<any>();

const testClick = () => {
    //child.value.testLog();
    console.log(child.value.testLog())
}
</script>

---

vue2的思维，这样写，是会报错的。

runtime-core.esm-bundler.js:218 Uncaught TypeError: child.value.testLog is not a function

---

修改为下面的，就可以了。

自定义组件（最终版）

<template>
  <div>test</div>
</template>
<script lang="ts" setup>
function testLog() {
    console.log('11')
    return '22';
}

// 暴露出去
defineExpose({
    testLog
})
</script>

---

意思就是，vue3的自定义组件里，方法函数等，默认是不对外的，如果需要外部调用，就需要将方法函数使用 defineExpose 暴露出去。

---

vue版本：3.1.4