【vue3】13.跟着官网学习vue3-模版引用，provide/inject，父子组件相互调用方法，defineExpose

每日鸡汤：所有真实的快乐，都来自很久的努力

目录

前言

1.为模版引用标注类型

2.为组件模板引用标注类型

（1）给子组件添加模版引用，在父组件中调用它的方法

（2）给父组件暴露方法，在子组件中调用

3. v-for 中的模板引用

总结

---

前言

本篇文章对应官网【模版引用】

---

1.为模版引用标注类型

可以为模版引用标注类型，把ref="x" 设置在某一个html原生的dom上

有两种方法给ref变量标注类型，第一种是后面加上冒号

import { Ref, ref } from 'vue'
// 注意左边用的是大写的Ref
const isCheck: Ref = ref(false)

还有一种是写在等号右边，类似ts范型的写法

const isCheck = ref(false)

同理模版引用，用哪种方法写都可以

const el = ref<HTMLElement | null>(null)
const el: Ref<HTMLElement | null> = ref(null)

2.为组件模板引用标注类型

同样也可以应用在组件上，一般用在子组件调用父组件的方法，或者父组件调用子组件的方法。

这个时候就需要用到defineExpose这个方法了，使用