Vue3-使用TS的语法绑定ref模板获取DOM

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

1.ref模板绑定

1. 定义一个ref响应式对象。
2. 在元素上通过 ref绑定给ref对象的响应式属性。

const input = ref<HTMLInputElement | null>(null);

onMounted(() => {
    input.value?.focus() //钩子函数中，使用需要？来判断不为null才使用
})

<input ref="input">

执行的顺序是：

1. 首先创建一个ref对象。
2. 由于setup函数执行的时候，dom元素还没挂载，此时的值为null。
3. 此时生命周期函数onMounted中，此时DOM已经挂载，会解析ref指令，将DOM元素注入到响应式属性中去。

2. 给组件绑定ref

有时，你可能需要为一个子组件添加一个模板 ref，以便调用它公开的方法。

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

import HelloWorld from './components/HelloWorld.vue'
const ref1 = ref<InstanceType<typeof HelloWorld> | null>(null);

<hello-world ref="ref1" :age="20" name="cat"></hello-world>

注意：必须是子组件通过defineExpose暴露得方法和属性才能获取和调用。

子组件：

function getSst() {
   console.log("子组件方法");
}

const person: Person = reactive({
   age: 0,
   name: ""
})

defineExpose({
   getSst,
   person
})

调用：

onMounted(() => {
   ref1.value.getSst()
   console.log(ref1.value.person);
})