读vue官方文档---模板引用

绑定Ref属性允许我们，在组件实例被挂载后，获取它的应用，从而执行DOM操作


<script setup>
import { ref, onMounted } from 'vue' // 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)
onMounted(() => { 
    input.value.focus() 
})
</script>

<template>
    <input ref="input" />
</template>

ref要在dom加载后才有值

这里是在onMounted的时候使用，所以dom已经加载，所以在未加载的使用场景下，要进行判空操作比如在setup时候打印input.value 就是null

v-for中ref是一个数组

在v-for中使用模板引用，ref绑定的就是一个数组

注意ref数组的顺序并不保证与源数组的顺序相同

ref还可以绑定函数哦

ref可以绑定一个函数，在绑定和组件卸载时候都会执行,卸载时，函数返回的el会为null

<template>
    <input :ref="el => {/* 将 el 赋值给一个数据属性或 ref 变量 */}" />
</template>

自定义组件上使用

自定义组件上不建议使用ref访问其属性，除非必要如果使用的是CompositionAPI的话，默认情况下是访问不了组件内的属性和方法，因为使用了setup后组件默认是私有的，此时需要子组件通过 defineExpose 来暴露

Typescirpt相关

为元素标签标注类型

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const el = ref<HTMLInputElement | null>(null)

onMounted(() => {
  el.value?.focus()
})
</script>

<template>
  <input ref="el" />
</template>

为自定义组件标注类型

定义一个MyModal组件，暴露open属性

<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const isContentShown = ref(false)
const open = () => (isContentShown.value = true)

defineExpose({
  open
})
</script>

关于获取自定义组件类型，记住下面操作（知识盲区）

<script setup lang="ts">
import MyModal from './MyModal.vue'

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

const openModal = () => {
  modal.value?.open()
}
</script>

1.首先通过typeof MyModal得到类型，再使用TypeScript内置的InstanceType工具来获取其实例类型

偷懒方式 ComponentPublicInstance

如果组件的具体类型无法获得，或者你并不关心组件的具体类型，那么可以使用 ComponentPublicInstance。这只会包含所有组件都共享的属性，比如 $el

import { ref } from 'vue'
import type { ComponentPublicInstance } from 'vue'

const child = ref<ComponentPublicInstance | null>(null)

每天学习vue官方文档Day1--模板引用