Vue 3 + ts 掌握 defineExpose：项目实践！

最近学习vue3的一些项目，对其中一些常用的东西和一些踩坑来做一些记录，本文是对DefineExpose的一些记录。

DefineExpose

默认情况下，通过模板引用或者 $parent 链获取到的组件的公开实例，并不会暴露任何在 <script setup> 中声明的绑定。使用 <script setup> 的组件默认关闭了这个功能。

要显式指定在 <script setup> 组件中要暴露出去的属性，可以使用 defineExpose 编译器宏。下面是一个示例：

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

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

当父组件通过模板引用的方式获取到当前组件的实例时，获取到的实例将包含暴露的属性，例如：{ a: number, b: number }。注意，ref 会像在普通实例中一样被自动解包。

项目中实践

在vue3+ts中 子组件声明一个函数但是不使用defineExpose暴露，ts会提示语法错误

//子组件
//新增、编辑逻辑 
const type = ref<string>('edit');
const typeChange = (value:string)=>{
  drawerActive.value = true;
  type.value = value
}

这里提示声明了但是没有使用，因为我们没有把它暴露出去也没有使用，并且这个情况下父组件是无法访问到该方法的，以下是使用报错

父组件代码如下

<template>
  <div class="h-full">
    <n-card>
      <n-tabs type="segment">
        <n-tab-pane name="chap1" :tab=myVNode>
          <WorkExp  ref="workExpRef" />
        </n-tab-pane>
        <n-tab-pane name="chap2" tab="项目经历">
          <ProjectExp />
        </n-tab-pane>
        <n-tab-pane name="chap3" tab="教育经历">
        </n-tab-pane>
        <n-tab-pane name="chap5" tab="社团/组织经历">
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import WorkExp from './components/workExp.vue';
const workExpRef = ref<any>(null); //使用any 不然会出现“never”上不存在属性“typeChange”
const handleClick = ()=>{
  const {value:workExp} = workExpRef
  if(workExp){
    workExp.type = 'add'
    workExp.typeChange('add')
  }
}

所以我们需要用 DefineExpose 来解决该问题

首先是ts报错的没有使用的问题，以下是解决方法

import { defineExpose} from 'vue';
const type = ref<string>('edit');
const typeChange = (value:string)=>{
  drawerActive.value = true;
  type.value = value
}
defineExpose({
  typeChange
})

此时typeChange就在子组件中暴露，父组件可以正常通过ref的方式访问到暴露出的方法