文章目录
概念:通过 ref标识 获取真实的 dom对象或者组件实例对象
模版引用的时机:组件挂载完毕
一、基本使用
实现步骤:
- 调用ref函数生成一个ref对象
- 通过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>