defineExpose：Vue3中父组件通过引用方式调用子组件中的属性

在Vue2中，我们可以直接通过ref引用的方式调用子组件中的属性和方法，而在Vue3的<script setup>写法中，与vue2几乎完全一致，不同之处在于，在子组件中需要通过 defineExpose 函数将子组件中要暴露的属性和方法暴露出去，才能被父组件获取到。

父组件代码：

template

<template>
    <el-button @click="testSubEvent">测试子组件中的方法</el-button>
</template>

script

<script setup>
const subRef = ref(null);
const testSubEvent = ()=>{
    subRef.value.subEvent();
}
</script>

子组件代码：

<script setup>
const subEvent = ()=>{
    console.log('这是一个子组件中的方法');
}
defineExpose({subEvent})
</script>

另外，在vue3的script setup写法中，defineExpose无需import引入。