vue中好用的API——defineExpose(更方便的抽离组件)

defineProps可以让我们轻松使用父组件的变量，defineEmits让我们方便使用父组件的方法，那子组件的方法或变量如何让父组件使用呢，vue之间的关系就像搭积木一样，defineExpose是进阶非常常用的API之一，让我们更加如鱼得水的操作。

我举一个最常用的例子：

日常开发中避免不了将抽屉组件或对话框组件单独抽离，但是，控制它们是否显示传值等是避免不了的，下面我们用defineExpose来实现

Drawer组件
我们把el-drawer单独抽离出为一个组件，drawer里的业务在Drawer自己的组件中写

<script setup lang="ts">
// 1. 定义数据 
const drawerModel = ref(false);

// 2. 初始化方法
const init = (id: number) => {
  drawerModel.value = true;
  console.log(id);
};

// 3. 暴露方法
defineExpose({
  init
});

// 更好的处理其他业务，如关闭，获取数据等等，让哪个组件的业务哪个组件实现
const handleClose = () => {
  drawerModel.value = false;
};
const getData= () > {
	...
}
</script>

<template>
	<el-drawer
    v-model="drawerModel"
    title="111"
    class="demo-drawer"
    @close="handleClose"
  >
  ></el-drawer>
</template>

父组件

<script setup lang="ts">
import Drawer from "xxx";
import { ref } from "vue";

// 抽屉
const drawerRef = ref(undefined);

// 打开抽屉
 const showDrawer = (row: any) => {
   drawerRef.value.init(row.id);
 };
</script>

<template>
	<span>这里我加id的原因是，一般表格中有很多这样的操作，我们可以通过这样传递参数</span>
	<el-button @click="showDrawer(row)">打开抽屉</el-button>
	<Drawer ref="drawerRef" />
</template>