【Vue】获取dom对象或者组件实例

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

模版引用的时机：组件挂载完毕

一、基本使用

实现步骤：

1. 调用ref函数生成一个ref对象
2. 通过ref标识绑定ref对象到标签（绑定的时候需要与上面的变量名同名）

<script setup>
import TestCom from '@/components/test-com.vue'
import { onMounted, ref } from 'vue'

// 模板引用(可以获取dom，也可以获取组件)
// 1. 调用ref函数，生成一个ref对象
// 2. 通过ref标识，进行绑定
// 3. 通过ref对象.value即可访问到绑定的元素(前提：必须渲染完成后，才能拿到)
const inp = ref(null)
console.log(inp) // 此时打印出来的inp的value里面是有值的
console.log(inp.value) // 此时打印的值为null，打印的这一瞬间value还没有绑定上，它必须等dom渲染完
// 所以不能一进页面就直接聚焦
// inp.value.focus()

// 生命周期钩子 onMounted
onMounted(() => {
  console.log(inp.value)
  inp.value.focus()
})
const clickFn = () => {
  inp.value.focus()
}
</script>

<template>
  <div>
    <input ref="inp" type="text">
    <!-- 能点了，说明按钮肯定有了，按钮有了说明dom肯定渲染完了 -->
    <button @click="clickFn">点击让输入框聚焦</button>
  </div>
</template>

---

二、defineExpose

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

App.vue

<script setup>
import TestCom from '@/components/test-com.vue'
import { onMounted, ref } from 'vue'
const testRef = ref(null)
const getCom = () => {
  console.log(testRef.value) // 此时可以看见元素上面挂载了count和sayHi()
  console.log(testRef.value.count)
  testRef.value.sayHi()
}
</script>

<template>
  <TestCom ref="testRef"></TestCom>
  <button @click="getCom">获取组件</button>
</template>

text-com.vue

<script setup>
const count = 999
const sayHi = () => {
  console.log('打招呼')
}

defineExpose({
  count,
  sayHi
})
</script>

<template>
  <div>
    我是用于测试的组件 - {{ count }}
  </div>
</template>