Vue3 通过ref获取DOM节点
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。-- vm.$refs.p 会是 DOM 节点 -->-- vm.$refs.child 会是子组件实例 -->-- 当动态绑定时,我们可以将ref定义为回调函数,显式地传递元素或组件实例 -->当v-for用于元
·
官方定义:
ref
被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs
对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。
<!-- vm.$refs.p 会是 DOM 节点 -->
<p ref="p">hello</p>
<!-- vm.$refs.child 会是子组件实例 -->
<child-component ref="child"></child-component>
<!-- 当动态绑定时,我们可以将ref定义为回调函数,显式地传递元素或组件实例 -->
<child-component :ref="(el) => child = el"></child-component>
当 v-for
用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。
一;获取单个绑定了ref属性的标签结点
1.给想要获取DOM元素的标签加上 ref 属性,并自定义一个名称
2.在 setup 中使用 ref 声明一个变量名与标签中 ref 属性名称相同的变量
3.之后这个通过 ref 声明的变量中存储的就是 ref 属性标记了的元素DOM结点
<template>
<div ref="getDom"> Ref属性获取dom </div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'Ref',
setup () {
// 先定义一个空的响应式数据ref定义的
// setup中返回该数据,你想获取那个dom元素,在该元素上使用ref属性绑定该数据即可
let getDom= ref(null)
return {
getDom
}
}
}
</script>
二;获取 v-for 循环的多个 ref 结点
1.获取 v-for 循环的结点,需要动态绑定 ref 属性,并定义一个获取对应DOM元素的回调函数。
<template>
<h3 :ref="getlist" v-for="index in 3">我是一组元素{{index}}</h3>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
name: 'Ref',
setup () {
// 获取v-for遍历的元素
// 定义一个空数组,准备接收循环的DOM元素
// 定义动态 ref 所对应的回调函数,往空数组push Dom
let listDom = []
const getlist = (el) => {
listDom.push(el)
}
return {
getlist
}
}
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)