Vue3-模板引用(获取组件)和defineExpose()

模板引用

概念：通过ref标识获取真实的dom对象或者组件实例对象

通过ref对象.value即可访问到绑定的元素（必须渲染完成后，才能拿到）

一进页面就让输入框聚焦：

<script setup>
import { ref, onMounted } from 'vue'
const inp = ref(null)
onMounted(() => {
  inp.value.focus()//输入框聚焦
})
</script>

<template>
  <input ref="inp" type="text" />
</template>

<style scoped>
input {
  width: 20rem;
  height: 2rem;
}
</style>

defineExpose()

默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，所以可以通过defineExpose编译宏指定哪些属性和方法允许访问，显式暴露组件内部的属性和方法

在子组件中：

<script setup>
defineExpose({
    变量名/方法名
})
</script>

这样在父组件里通过ref拿到这个子组件的value时，也可以访问到里面被暴露出去的变量和方法