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 = [] })
