Vue

Vue中的ref和$refs

Posted by Jeremy on October 17, 2018

Vue中$refs的用法详解

一般来说,如果想要获取dom元素,需要使用js原生方法 document.getElementById(),在vue中获取 dom有不同的方法,vue提供了一个ref特例属 ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例

<span ref='span_val'>2222</span

mounted(){
      this.$nextTick(function(){
        var that = this;
        console.log(that.$refs.span_val)
      })
    },

结果

这样就可以拿到当前的dom,这样操作的好处是减少获取dom节点的消耗

注意

但是需要注意的是$refs 只会在组件渲染完成之后生效,并且它们不是响应式的。这只意味着一个直接的子组件封装的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。