Vue中的ref和$refs的使用

在vue中很少直接操作DOM,如果需要操作DOM。我们可以通过ref和$ref来实现

ref

ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的 DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。

当在子组件或者DOM元素上写 ref=”xxx” 时，vm 实例上就有了一个 $refs 属性，包含了所有注册过 ref 的 DOM对象

$refs

$refs 是一个对象，持有已注册过 ref 的所有的子组件。
因此可以通过 this.$refs.xxx.属性名（style,attr…）从而达到在vue中操作DOM元素的目的了

<div id="app">
        <div>
            <h2 ref="name1">这是name1节点元素</h2>
            <p ref="name2">这是name2节点元素</p>
        </div>
 </div>
 mounted() {
                console.log(this);   //vue实例对象
                console.log(this.$refs.name1);   //上面的h2标签元素
                console.log(this.$refs.name1.textContent);  //标签内容
                console.log(this.$refs.name2);  //上面的p标签元素                
 }

Vue中ref属性使用的注意事项

1.在vue中为HTML标签设置ref属性，主要是为了一些需要进行操作DOM才能完成的功能而设置的。

2.ref属性相当于给标签设置了一个ID，可以使用该特殊标识来进行一些DOM的操作，但是使用的时候有如下几个注意事项：

ref属性值绑定元素都是唯一的，如果一个ref属性绑定了多个dom节点，那么这个ref属性将会默认绑定到最后设置该ref属性值的DOM节点。
使用时不是直接this.ref值进行访问DOM节点，而是需要通过 this.$refs.ref 值 进行访问DOM节点，因为vue会将实例中所有的ref属性值都保存到vue实例的,$refs属性内。
所有的ref属性进行的操作都不是响应式的，所以避免在计算属性 (Computed)，和 模板 ({{}}) 中使用ref属性。

$refs

• $refs可以用来获取dom节点，进行一些dom的操作
• $refs可以用来获取组件对象（Vue实例）
• $refs在for循环中可以配合 refInFor={true} 来以数组形式获取多个组件对象

https://blog.csdn.net/qq_38128179/article/details/88876060?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242