本文共 1517 字，大约阅读时间需要 5 分钟。

在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元素的目的了

举例验证：

   
        
    
            
     
这是name1节点元素
            
     
这是name2节点元素
        
    
 
   

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} 来以数组形式获取多个组件对象

{          render:(h: CreateElement) {              return (                
   
                      {                    [1,2].map(()=>{                        return 
                        })                  }                              
   
            )          }      }

• this.$refs = {divRef: HTMLDivElement, inputRef: [HTMLInputElement, HTMLInputElement]}

转载地址：http://wiuvi.baihongyu.com/