Vue3中 ref 属性详解
Posted 明天也要努力
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue3中 ref 属性详解相关的知识,希望对你有一定的参考价值。
1. Vue2 中的 ref 属性
<template>
<div class="wrap">
<div ref="box">box</div>
<ul>
<li v-for="i in 4" :key="i" ref="li">第i项</li>
</ul>
</div>
</template>
<script>
export default
methods:
getDom()
const boxText = this.$refs.box.innerhtml;
console.log(boxText);
const lis = this.$refs.li;
console.log(lis,lis[1].innerHTML)
,
,
mounted()
this.getDom();
,
</script>
总结:
- Vue2中 可以通过 ref 直接操作单个 DOM和组件,如: this.$refs.box;
- Vue2中 可以批量通过 ref 操作 DOM 和组件,如: this.$refs.li[0];
2. Vue3 中的 ref 属性
在 Vue3 中没有 $refs,因此 Vue3 中通过 ref 属性获取元素就不能按照 vue2 的方式来获取。Vue3 需要借助生命周期方法,因为在 setup 执行时,template 中的元素还没挂载到页面上,所以必须在 mounted 之后才能获取到元素。
操作单个 DOM 或者组件
<template>
<div ref="box">box</div>
</template>
<script>
import onMounted, ref from 'vue';
export default
setup()
// 1. 先定义一个空的响应式数据( ref 定义的)
// 2 setup中返回定义的数据,需要获取哪个 dom 元素,就在对应元素上使用 ref 属性绑定该数据即可。
const box = ref(null);
const getDom = () =>
console.log(box.value)
;
onMounted(() =>
getDom();
);
return
box
</script>
总结: 先申明 ref 响应式数据,再返回给模版使用,模板中通过 ref 绑定数据;
获取 v-for 遍历的 DOM 或者 组件
<template>
<ul>
<li
v-for="item in cityList"
:key="item.id"
:ref="getDom">
item.city
</li>
</ul>
</template>
<script>
import onMounted, reactive from 'vue';
export default
setup()
const cityList = reactive([
city:'武汉', id: '027',
city:'南京', id: '025',
city:'重庆', id: '023',
]);
// 1.定义一个空数组,接收所有的dom
const lis = [];
// 2. 定义一个函数,往空数组push dom
const getDom = (el) =>
lis.push(el);
onMounted(() =>
console.log(lis,lis[0])
)
return
cityList,
getDom,
</script>
总结: 先定义一个空数组,再定义一个函数获取元素,并把该函数绑定到 ref 上(必须动态绑定),最后在函数中可以通过参数得到单个元素,这个元素一般可以放到数组中。
补充: 有一个边界问题,组件更新的时候会重复的设置 dom 元素给数组:
// ref 获取 v-for 遍历的DOM元素,需要在组件更新的时候重置接受dom元素的数组。
onBeforeUpdate(()=>
list = []
)
以上是关于Vue3中 ref 属性详解的主要内容,如果未能解决你的问题,请参考以下文章
Vue3中 响应式 API ( readonlyshallowReadonlytoRawmarkRaw ) 详解
Vue3中 响应式 API ( readonlyshallowReadonlytoRawmarkRaw ) 详解
Vue3中 响应式 API( shallowReactiveshallowReftriggerRef customRef )详解
Vue3中 响应式 API( shallowReactiveshallowReftriggerRef customRef )详解
Vue3中 响应式 API( shallowReactiveshallowReftriggerRef customRef )详解