defineExpose使用

遇到问题

当在Vue3中使用setup语法糖后，父组件无法通过ref获取子组件实例的数据、方法等

解决方案

可以在子组件中通过defineExpose将子组件的数据暴露出去已供父组件使用

<script setup lang="ts">
// 子组件 SkuForm.vue
// 获取sku所需要的数据
const getSkuData = async (c1Id: number, c2Id: number, spuItem: I_SPU_OBJ) => {
  // 收集数据
  skuParams.category3Id = spuItem.category3Id
  skuParams.spuId = spuItem.id as number
  skuParams.tmId = spuItem.tmId
  // 获取平台属性
  const attrRes = await reqGetAttr(c1Id, c2Id, spuItem.category3Id as number)
  // 获取对应的照片墙
  const imgRes = await reqGetSpuImageList(spuItem.id as number)
  // 获取对应的销售属性
  const saleRes = await reqGetSpuSaleAttr(spuItem.id as number)
  // 存储
  attrList.value = attrRes.data
  saleList.value = saleRes.data
  imgList.value = imgRes.data
}
// 通过defineExpose将函数暴露出去
defineExpose({
  getSkuData,
})
</script>

<script setup lang="ts">
// 父组件 index.vue
const skuFormRef = ref<any>() // SkuForm组件实例
skuFormRef.value.getSkuData(c1Id as number, c2Id as number, spuItem) // 直接调用
</script>

扩展

可以通过defineExpose实现父子传参的功能