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

      {
          render:(h: CreateElement) {
              return (
                <div ref='divRef'>
                  {
                    [1,2].map(()=>{
                        return <input ref='inputRef'  refInFor={true}   />
                    })
                  }              
                </div>
            )
          }
      }

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