[前端] 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获取，则会报错。