组合式 API_为组件模板引用标注类型

defineExpose()

使用 <script setup> 的组件是默认关闭的，不会暴露任何在 <script setup> 中声明的绑定

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性

xxxxxxxxxx
<!-- Modal.vue -->
<template>
    <div>{{ msg }}</div>
</template>
<script setup lang="ts">

import { ref } from "vue"

const msg = ref("Modal的数据")

defineExpose({
    msg
})

</script>

xxxxxxxxxx
<!-- HomeView.vue -->
<template>
  <Modal ref="MyModal" />
  <button @click="openModal">按钮</button>
</template>
<script setup lang="ts">
import Modal from "./Modal.vue"
import { ref } from "vue"

const MyModal = ref(null)

const openModal = () =>{
  console.log(MyModal.value.msg) // Modal的数据
}

</script>

为组件模板引用标注类型

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

xxxxxxxxxx
<!-- Modal.vue -->
<template>
    <div v-show="isShow">{{ msg }}</div>
</template>
<script setup lang="ts">

import { ref } from "vue"

const msg = ref("Modal的数据")
const isShow = ref(false)

const open = () => (isShow.value = true)

defineExpose({
    msg,
    open
})

</script>

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

xxxxxxxxxx
<!-- HomeView.vue -->
<template>
  <Modal ref="MyModal" />
  <button @click="openModal">按钮</button>
</template>
<script setup lang="ts">
import Modal from "./Modal.vue"
import { ref } from "vue"

const MyModal = ref<InstanceType<typeof Modal> | null>(null)

const openModal = () =>{
  MyModal.value?.open()
}

</script>