Vue中的 ref 和 $refs

ref 有三种用法：

1、ref 加在普通的元素上，用this.￥refs.（ref值） 获取到的是dom元素

2、 ref 加在子组件上 ， 用this.￥refs.(ref值) 获取到的就是组件实例 ，可以用组件的所有方法。 在使用方法的时候直接用 this.￥refs.(ref值).方法() 就能直接用了

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

注意点：

如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref =某变量 ;

这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String））

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。

例子1:

添加ref属性

<div id="app">
    <h1 ref="h1Ele">这是H1</h1>
    <hello ref="ho"></hello>
 
    <button @click="getref">获取H1元素</button>
</div>

获取注册过 ref 的所有组件或元素

methods: {
   
        getref() {
   
          // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件
           console.log(this.$refs.h1Ele.innerText);
           this.$refs.h1ele.style.color = 'red';// 修改html样式
 
          console.log(this.$refs.ho.msg);// 获取组件数据
          console.log(this.$refs.ho.test);// 获取组件的方法
        }
      }

例子2: