详细分析Vue3中的defineExpose（附Demo）

前言

其根本知识可参考官网：Vue3中的defineExpose
1. 根本知识

defineExpose 是 Vue 3 的 Composition API 中一个新的实用函数，用于在 <script setup> 语法下显式暴露组件的公共属性和方法
这在处理子组件时特别有用，允许父组件访问子组件的特定属性或方法
在 Vue 3 中，当我们使用 <script setup> 语法糖时，组件默认不会自动暴露内部的任何状态或方法给外部使用，为了显式暴露某些属性或方法，可以使用 defineExpose
示例Demo如下：

1. <script setup>
2. import { ref } from 'vue'
4. const a = 1
5. const b = ref(2)
7. defineExpose({
8.   a,
9.   b
10. })
11. </script>

复制代码

当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)
2. Demo

• 父组件渲染子组件 Child 并通过 ref 获取子组件的实例。
  
• 子组件中的 count 和 increment 方法通过 defineExpose 暴露出来。
  
• 当点击父组件中的 “Access Child Methods” 按钮时，父组件可以访问并调用子组件的 count 和 increment
  

子组件：

1. <template>
2.   <div>
3.     <p>Count: {{ count }}</p>
4.     <button @click="increment">Increment</button>
5.   </div>
6. </template>
8. <script setup>
9. import { ref } from 'vue';
11. const count = ref(0);
13. function increment() {
14.   count.value++;
15. }
17. // 使用 defineExpose 来暴露 count 和 increment
18. defineExpose({
19.   count,
20.   increment,
21. });
22. </script>

复制代码

父组件：

1. <template>
2.   <div>
3.     <Child ref="childRef" />
4.     <button @click="accessChild">Access Child Methods</button>
5.   </div>
6. </template>
8. <script setup>
9. import { ref, onMounted } from 'vue';
10. import Child from './Child.vue';
12. const childRef = ref(null);
14. function accessChild() {
15.   if (childRef.value) {
16.     console.log('Current count:', childRef.value.count);
17.     childRef.value.increment();
18.     console.log('Count after increment:', childRef.value.count);
19.   }
20. }
22. onMounted(() => {
23.   if (childRef.value) {
24.     console.log('Child component mounted, initial count:', childRef.value.count);
25.   }
26. });
27. </script>

复制代码

总的来说：

• defineExpose 用于在 <script setup> 中显式暴露组件内部状态和方法
  
• 父组件可以通过 ref 访问子组件实例并调用暴露的属性和方法
  
• 使用 defineExpose 可以让组件更加模块化和可控，只有显式暴露的部门才气被外部访问，增强了封装性和安全性
  

这个功能在组件之间需要进行复杂交互时特别有用，尤其是在大型项目中，能够显著提升代码的可读性和可维护性
3. 实战

从入门到十实战，反复在反复，结合实战的Demo加深印象
3.1 函数暴露

也可通过函数进行暴露

1. <template>
2.   <div>
3.     <button @click="open">Fetch Data</button>
4.     <div v-if="detailLoading">Loading...</div>
5.     <div v-else>
6.       <div v-for="item in detailData.attachment1" :key="item">{{ item }}</div>
7.       <div v-for="item in detailData.attachment2" :key="item">{{ item }}</div>
8.     </div>
9.   </div>
10. </template>
12. <script setup>
13. import { ref, onMounted } from 'vue'
14. import DangerousWorkApi from '@/api/DangerousWorkApi'
16. const detailLoading = ref(false)
17. const detailData = ref({})
18. const props = defineProps(['id'])
19. const queryId = 'some-query-id'
21. const getInfo = async () => {
22.   detailLoading.value = true
23.   try {
24.     detailData.value = await DangerousWorkApi.getDangerousWork(props.id || queryId)
25.     const attachment1 = detailData.value.attachment1;
26.     const attachment2 = detailData.value.attachment2;
27.     detailData.value.attachment1 = attachment1.split(",");
28.     detailData.value.attachment2 = attachment2.split(",");
29.   } finally {
30.     detailLoading.value = false
31.   }
32. }
34. defineExpose({ open: getInfo })
36. onMounted(() => {
37.   getInfo()
38. })
39. </script>

复制代码

3.2 导入子组件数据

另外一个实战Demo加深印象
将 handleImport 方法改为接受参数，并转达 formData.chineseShipName 和 formData.shipVoyage

1. <template>
2.   <Dialog :title="dialogTitle" v-model="dialogVisible" width="70%">
3.     <el-form
4.       ref="formRef"
5.       :model="formData"
6.       :rules="formRules"
7.       label-width="100px"
8.       v-loading="formLoading"
9.     >
10.       <el-row :gutter="20">
11.         <!-- ... 省略其它表单项 ... -->
12.       </el-row>
13.     </el-form>
14.    
15.     <el-tabs v-model="subTabsName">
16.       <el-tab-pane name="enterSite">
17.         <template #label>
18.           危险品进场申请单
19.           <el-button
20.             type="warning"
21.             plain
22.             @click="handleImport(formData.chineseShipName, formData.shipVoyage)"
23.             v-hasPermi="['dangerous:appointment-commission:enterSiteImport']"
24.             style="margin-left: 10px;"
25.           >
26.             <Icon icon="ep:upload" class="mr-5px" /> 一键导入
27.           </el-button>
28.         </template>
29.         <EnterSiteForm ref="enterSiteFormRef" :appointment-id="formData.id" :form-type="formType" />
30.       </el-tab-pane>
31.     </el-tabs>
32.    
33.     <template #footer>
34.       <el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="formType !== 'detail'">保 存</el-button>
35.       <el-button @click="submitAndCommitForm" type="success" :disabled="formLoading" v-if="formType !== 'detail'">保存并提交预约</el-button>
36.       <el-button @click="dialogVisible = false" v-if="formType !== 'detail'">取 消</el-button>
37.     </template>
38.   </Dialog>
40.   <EnterSiteImportForm ref="importFormRef" @success="getList" />
41. </template>
43. <script>
44. import { ref } from 'vue'
46. export default {
47.   setup() {
48.     const importFormRef = ref(null)
49.     const handleImport = (chineseShipName, shipVoyage) => {
50.       importFormRef.value.open(chineseShipName, shipVoyage)
51.     }
53.     return {
54.       importFormRef,
55.       handleImport,
56.       // ... 省略其它数据和方法 ...
57.     }
58.   }
59. }
60. </script>

复制代码

在导入对话框组件中，修改 open 方法以接受参数，并在组件中存储这些参数以便在提交时使用
另外一个文件如下：

1. defineOptions({ name: 'EnterSiteImportForm' })
3. const message = useMessage() // 消息弹窗
5. const dialogVisible = ref(false) // 弹窗的是否展示
6. const formLoading = ref(false) // 表单的加载中
7. const uploadRef = ref()
8. const importUrl =
9.   import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/dangerous/enterprise-registry/enterSiteImport'
10. const uploadHeaders = ref() // 上传 Header 头
11. const fileList = ref([]) // 文件列表
14. const chineseShipName = ref('') // 存储中文船名
15. const shipVoyage = ref('') // 存储船舶航次
17. /** 打开弹窗 */
18. const open = (shipName, voyage) => {
19.   dialogVisible.value = true
20.   fileList.value = []
21.   chineseShipName.value = shipName
22.   shipVoyage.value = voyage
23.   resetForm()
24. }
25. defineExpose({ open }) // 提供 open 方法，用于打开弹窗
27. /** 提交表单 */
28. const submitForm = async () => {
29.   if (fileList.value.length == 0) {
30.     message.error('请上传文件')
31.     return
32.   }
33.   // 提交请求
34.   uploadHeaders.value = {
35.     Authorization: 'Bearer ' + getAccessToken(),
36.     'tenant-id': getTenantId(),
37.     'Chinese-Ship-Name': chineseShipName.value,
38.     'Ship-Voyage': shipVoyage.value
39.   }
40.   formLoading.value = true
41.   uploadRef.value!.submit()
42. }

复制代码

3.3 更新子表单数据

对应的方法数据如下：
html按钮

1. <el-button
2.   type="info"
3.   plain
4.   @click="handleRefresh(formData.id)"
5.   v-hasPermi="['dangerous:appointment-commission:enterSiteRefresh']"
6. >
7.   <Icon icon="ep:refresh" class="mr-5px" /> 刷新重置
8. </el-button>

复制代码

对应的按钮方法如下：

1. /** 刷新 */
2. const handleRefresh = async (id) => {
3.   formLoading.value = true;
4.   try {
5.     const fileData = await AppointmentCommissionApi.getEnterSiteListByAppointmentId(id);
6.     console.log(fileData);
8.     // 更新子表单的数据
9.     if (enterSiteFormRef.value) {
10.       enterSiteFormRef.value.setData(fileData);
11.     }
12.   } catch (error) {
13.     console.error('Failed to fetch data:', error);
14.   } finally {
15.     formLoading.value = false;
16.   }
17. }

复制代码

通过另外一个文件的革新来暴露

1. <template>
2.   <el-form
3.     ref="formRef"
4.     :model="formData"
5.     :rules="formRules"
6.     v-loading="formLoading"
7.     label-width="0px"
8.     :inline-message="true"
9.   >
10.     <el-table :data="formData" class="-mt-10px">
11.       <el-table-column label="序号" type="index" width="100" />
12.       <el-table-column label="提单号" min-width="150">
13.         <template #default="{ row, $index }">
14.           <el-form-item :prop="`${$index}.billNumber`" :rules="formRules.billNumber" class="mb-0px!">
15.             <el-input v-model="row.billNumber" :disabled="formType === 'detail'" placeholder="请输入提单号" />
16.           </el-form-item>
17.         </template>
18.       </el-table-column>
19.       <el-table-column label="箱号" min-width="150">
20.         <template #default="{ row, $index }">
21.           <el-form-item :prop="`${$index}.boxNumber`" :rules="formRules.boxNumber" class="mb-0px!">
22.             <el-input v-model="row.boxNumber" :disabled="formType === 'detail'" placeholder="请输入箱号" />
23.           </el-form-item>
24.         </template>
25.       </el-table-column>
26.       <el-table-column label="尺寸" min-width="150">
27.         <template #default="{ row, $index }">
28.           <el-form-item :prop="`${$index}.boxSize`" :rules="formRules.boxSize" class="mb-0px!">
29.             <el-input v-model="row.boxSize" :disabled="formType === 'detail'" placeholder="请输入尺寸" />
30.           </el-form-item>
31.         </template>
32.       </el-table-column>
33.       <el-table-column label="箱型" min-width="150">
34.         <template #default="{ row, $index }">
35.           <el-form-item :prop="`${$index}.boxType`" :rules="formRules.boxType" class="mb-0px!">
36.             <el-input v-model="row.boxType" :disabled="formType === 'detail'" placeholder="请输入箱型" />
37.           </el-form-item>
38.         </template>
39.       </el-table-column>
40.       <el-table-column label="货名" min-width="150">
41.         <template #default="{ row, $index }">
42.           <el-form-item :prop="`${$index}.productName`" :rules="formRules.productName" class="mb-0px!">
43.             <el-input v-model="row.productName" :disabled="formType === 'detail'" placeholder="请输入货名" />
44.           </el-form-item>
45.         </template>
46.       </el-table-column>
47.       <el-table-column label="危险品等级" min-width="150">
48.         <template #default="{ row, $index }">
49.           <el-form-item :prop="`${$index}.hazardousLevel`" :rules="formRules.hazardousLevel" class="mb-0px!">
50.             <el-input v-model="row.hazardousLevel" :disabled="formType === 'detail'" placeholder="请输入危险品等级" />
51.           </el-form-item>
52.         </template>
53.       </el-table-column>
54.       <el-table-column label="危规号" min-width="150">
55.         <template #default="{ row, $index }">
56.           <el-form-item :prop="`${$index}.hazardCode`" :rules="formRules.hazardCode" class="mb-0px!">
57.             <el-input v-model="row.hazardCode" :disabled="formType === 'detail'" placeholder="请输入危规号" />
58.           </el-form-item>
59.         </template>
60.       </el-table-column>
61.       <el-table-column align="center" fixed="right" label="操作" width="60" v-if="formType !== 'detail'">
62.         <template #default="{ $index }">
63.           <el-button @click="handleDelete($index)" link type="primary" v-if="formType !== 'detail'">删除</el-button>
64.         </template>
65.       </el-table-column>
66.     </el-table>
67.   </el-form>
68.   <el-row justify="center" class="mt-3">
69.     <el-button @click="handleAdd" round v-if="formType !== 'detail'">+ 添加危险品</el-button>
70.   </el-row>
71. </template>
73. <script setup lang="ts">
74. import { AppointmentCommissionApi } from '@/api/dangerous/appointmentcommission'
76. const props = defineProps<{
77.   appointmentId: undefined, // 预约编号（主表的关联字段）
78.   formType: string
79. }>()
80. const formLoading = ref(false) // 表单的加载中
82. const formData = ref([]) // 表单数据
83. const formRules = reactive({
84.   // 表单验证规则
85.   billNumber: [{ required: true, message: '请输入提单号', trigger: 'blur' }],
86.   boxNumber: [{ required: true, message: '请输入箱号', trigger: 'blur' }],
87.   boxSize: [{ required: true, message: '请输入尺寸', trigger: 'blur' }],
88.   boxType: [{ required: true, message: '请输入箱型', trigger: 'blur' }],
89.   productName: [{ required: true, message: '请输入货名', trigger: 'blur' }],
90.   hazardousLevel: [{ required: true, message: '请输入危险品等级', trigger: 'blur' }],
91.   hazardCode: [{ required: true, message: '请输入危规号', trigger: 'blur' }],
92. })
93. const formRef = ref() // 表单 Ref
95. /** 监听主表的关联字段的变化，加载对应的子表数据 */
96. watch(
97.   () => props.appointmentId,
98.   async (val) => {
99.     // 1. 重置表单
100.     formData.value = []
101.     // 2. val 非空，则加载数据
102.     if (!val) {
103.       return;
104.     }
105.     try {
106.       formLoading.value = true
107.       formData.value = await AppointmentCommissionApi.getEnterSiteListByAppointmentId(val)
108.     } finally {
109.       formLoading.value = false
110.     }
111.   },
112.   { immediate: true }
113. )
115. /** 新增按钮操作 */
116. const handleAdd = () => {
117.   if (props.formType === 'detail') return // 禁用“添加危险品”按钮
118.   const row = {
119.     id: undefined,
120.     billNumber: '',
121.     boxNumber: '',
122.     boxSize: '',
123.     boxType: '',
124.     productName: '',
125.     hazardousLevel: '',
126.     hazardCode: '',
127.     appointmentId: props.appointmentId,
128.   }
129.   formData.value.push(row)
130. }
132. /** 删除按钮操作 */
133. const handleDelete = (index) => {
134.   if (props.formType === 'detail') return // 禁用“删除”按钮
135.   formData.value.splice(index, 1)
136. }
138. /** 表单校验 */
139. const validate = () => {
140.   return formRef.value.validate()
141. }
143. /** 表单值 */
144. const getData = () => {
145.   return formData.value
146. }
148. // 设置数据的方法
149. const setData = (newData) => {
150.   formData.value = newData;
151. };
153. defineExpose({ validate, getData, setData })
154. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。