ref属性

1、在元素上添加ref属性  通过ref属性可操作dom元素 因为dom元素是在mounted钩子函数时已经渲染完毕 所以操作dom最早可以在该钩子函数中操作(在mounted之前操作会得到undefined)通过this.$refs.xxx/this.$refs["xxx"]来操作dom元素

2、在同一个页面ref值不唯一:(1) 如果两个元素是兄弟关系  那么通过ref属性获取到的dom节点为最后一个元素节点   (2)如果两个元素间是父子关系 获取到的dom元素节点为父级的元素节点   【参考文章:Vue单文件组件中多个同名的ref属性,this.$refs的取值及其使用注意事项】

3、如果绑定ref属性的dom元素节点上有v-if  v-show或v-for时(即dom元素是根据后台数据动态操作的 即响应式),在mounted阶段通过ref属性也是获取该dom元素节点时获取不到为undefined 因为当前的绑定这三个属性的元素节点还未存在   解决方法:(1)不在mounted钩子中获取 改为在updated中获取 (2)如要在mounted中获取 可以利用this.$nectTick(()=>{})等页面渲染后再调用  (3)如第二个方式还是不行 则再加一个定时器 结合this.$nextTick()使用   【参考文章:vue中的v-for和ref】

    通过v-for动态生成元素绑定多个ref属性  通过ref获取dom元素时 如ref值相同  获取到的为数组 要操作改ref值下的某个元素节点时要通过this.$refs.xxx[index]来获取   也可以给动态设置ref值(ref值唯一) 但是获取到的也是数组【参考文章:vue循环标签ref的值重复问题,获取ref为undefined】

你可能感兴趣的:(ref属性)