Vue3---组合式API - 模板引用

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

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

<script setup>
import {onMounted, ref} from "vue";
import Test from "@/Test.vue";
// 1. 调用ref函数 -> ref对象
const h1Ref = ref(null)
const comRef = ref(null)

//组件挂在完毕才能获取
onMounted(()=>{
    console.log(h1Ref.value)
    console.log(comRef.value)
})
</script>

<template>
    <!--2. 通过ref标识绑定ref对象-->
    <h1 ref="h1Ref">我是dom标签h1</h1>
    <Test ref="comRef"></Test>
</template>

<script setup>
import {ref} from 'vue'
// 默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件的，可通过defineExpose编译宏指定哪些属性和方法允许访问
const name = ref('test name')
const setName = () =>{
    name.value = 'test new name'
}
// defineExpose编译宏
defineExpose({
    name,setName
})
</script>

<template>
  <div>我是test组件</div>
</template>

1. 获取模板时机：组件挂载完毕

2. defineExpose编译宏的作用：显示暴露组件内部的属性和方法