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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在vue2.x中,可以通过给元素添加ref='xxx'属性,然后在代码中通过this.$refs.xxx获取到对应...
    深度剖析JavaScript阅读 43,932评论 1 12
  • ref获取DOM元素vue中获取DOM元素不建议用js直接操作DOM,使用ref可达到操作DOM的效果写法:thi...
    Jure_joe阅读 1,217评论 0 1
  • 只要在vue里访问元素/子组件,就要使用ref注册引用;1.访问子组件实例或者子元素通过ref给元素或者子组件赋予...
    happy_b277阅读 3,741评论 0 0
  • 预期:stringref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在...
    谷子多阅读 1,421评论 0 0
  • React Refs React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何...
    Android_冯星阅读 14,378评论 1 4