vue3 ts 让子组件通过 defineExpose 暴露的方法有代码提示-觅稀奇MeXiQi.COM

vue3 ts 让子组件通过 defineExpose 暴露的方法有代码提示

访客 2024-04-23 1406 0

有时，你可能需要为一个子组件添加一个模板引用，以便调用它公开的方法。举例来说，我们有一个Child子组件，它有一个打开模态框的方法：

<scriptsetuplang="ts">

import{ref}from'vue'

constisContentShown=ref(false)

constopen=()=>(isContentShown.value=true)

defineExpose({

open

})

</script>

为了获取MyModal的类型，我们首先需要通过typeof得到其类型，再使用TypeScript内置的InstanceType工具类型来获取其实例类型：

<scriptsetuplang="ts">

importMyModalfrom'./MyModal.vue'

constmodal=ref<InstanceType<typeofMyModal>|null>(null)

constopenModal=()=>{

modal.value?.open()

}

</script>

官网跳转Vue官方文档