[前端] VUE基础 (7) (获取原生DOM)

一、获取原生DOM

我们之前在vue中获取原生的DOM,都是利用document来获取的,不是很方便。

vue为我们提供了ref属性,来方便的获取标签。

<div ref=‘div1‘></div>
<p ref=‘p1‘></p>
<Home ref=‘home1‘></Home>

获取标签:

this.$refs.div1 //获取ref为‘div1‘的<div>标签
this.$refs.p1 //获取ref为‘p1‘的<p>标签
this.$refs.home1 //获取ref为‘home1‘的组件对象

但是在使用从this.$refs中获取对象的时候,注意声明周期的问题,获取的时候标签是否已经被渲染,如果还未被渲染则会报错。例如想获取的标签是子组件的标签,而这个子组件要点击某个按钮才能被渲染到页面上,如果我们未点击按钮就在父组件去使用this.$refs获取,则会报错。

相关推荐