vue3 语法糖 导出函数

在Vue3中，可以使用语法糖来导出函数。具体步骤如下：

1. 在`.vue`文件中，使用`<script setup>`标签来编写代码。
2. 在`<script setup>`标签中，使用`defineExpose`函数来导出函数。例如：

   <script setup>
   import { defineExpose } from 'vue'
   
   const myFunction = () => {
     console.log('Hello from myFunction!')
   }
   
   defineExpose({
     myFunction
   })
   </script>

在上面的例子中，我们定义了一个名为`myFunction`的函数，并使用`defineExpose`函数将其导出。

3. 在父组件中，可以使用`ref`或`reactive`来引用子组件，并调用子组件中导出的函数。例如：

   <template>
     <child-component ref="childRef" />
   </template>
   
   <script>
   import { onMounted } from 'vue'
   
   export default {
     mounted() {
       onMounted(() => {
         this.$refs.childRef.myFunction()
       })
     }
   }
   </script>

在上面的例子中，我们使用`ref`来引用子组件，并在父组件的`mounted`钩子函数中调用子组件中导出的`myFunction`函数。