这里写自定义目录标题
获取标签元素 ref 获取到标签元素或组件
<template>
<div>
<div ref="elref">div元素</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
// 创建一个DOM引用,名称必须与元素的ref属性名相同
const elref= ref(null)
// 在挂载后才能通过 el 获取到目标元素
onMounted(() => {
elref.value.innerHTML = '我是ref组件'
})
// 把创建的引用 return 出去
return {elref}
}
}
</script>
获取元素的操作一共分为以下几个步骤:
1.先给目标元素的 ref 属性设置一个值,假设为 el
2.然后在 setup 函数中调用 ref 函数,值为 null,并赋值给变量 el,这里要注意,该变量名必须与我们给元素设置的 ref 属性名相同
3.把对元素的引用变量 el 返回(return)出去
4.设置的元素引用变量只有在组件挂载后才能访问到,因此在挂载前对元素进行操作都是无效的