vue $refs操作Dom

vue $refs操作Dom

vue本身不提倡支持js获取与操作dom，但有时不得不这么做，因此$ refs便为此而准备，但它仅仅是一个直接操作子组件的应急方案—避免在模板或计算属性中使用$refs。

<div ref="demo" class="container">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt a dolorem nostrum, optio odio possimus unde alias,
    mollitia iste facilis suscipit maiores impedit! Modi fuga inventore laboriosam optio vel quibusdam.
</div>

mounted(){
    
    
    console.log(this.$refs.demo);
},

这与我们之前使用的获取id/class等dom节点获取操作的结果一致。获取之后可以进行dom操作（css样式添加&更改、dom节点属性修改等等）。

如图，ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $ refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
在上面的例子中，class为container的div的引用信息为demo ，$ refs 是所有注册过的ref的一个集合，
console.log(this.$ refs.demo)
console.log(document.getElementById(‘demo’))
这两种方法获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗。

子组件的引用

当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。