模板引用
我对它的理解是V3中父子传值的另一种实现方式，相比于普通的定义props和emit来说它更加直接，它通过直接抓取DOM元素来使用值和方法等。
下面直接上干货
基本使用-普通元素
实现步骤:
- 调用ref函数生成一个ref对象
- 通过ref标识绑定ref对象到标签
- 组件挂载完成之后，可以拿到值
<script setup>
import { onMounted, ref } from 'vue'
// 1. 调用ref函数得到ref对象
const refDiv = ref(null)
// 3. 组件挂载完成之后，可以拿到值
onMounted(() => {
console.log(refDiv.value)
})
</script>
<template>
<!-- 2. 通过ref标识绑定ref对象 -->
<div ref="refDiv">标题</div>
</template>
注意：只有当组件挂载完成之后，才能获取到值
这是基础用法，可以直接抓取div这个DOM元素，下面来看看进阶用法（抓取组件）
进阶使用-组件元素
父组件
<script setup>
import MyCom from './my-com.vue'
import { onMounted, ref } from 'vue'
// 1. 调用ref函数得到ref对象
const refCom = ref(null)
// 3. 组件挂载完成之后，可以拿到值
onMounted(() => {
console.log('com', refCom.value)
})
</script>
<template>
<!-- 2. 通过ref标识绑定ref对象 -->
<MyCom ref="refCom" />
</template>
子组件
<script setup>
import { ref } from 'vue'
const num = ref(100)
</script>
<template>
<div>com内部的数据{{ num }}</div>
</template>
注意：默认情况下，我们不能通过对组件的引用拿到组件内部的数据，需要借助defineExpose
defineExpose
默认情况下在 语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法容许访问
暴露后在父组件获取num
方法和获取值一样我就直接上图啦😁
