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。