浅谈Vue的$ref

前言：

在别人的代码中经常看到使用 $ref 进行操作, 我虽然知道这个方法，但是理解的不是非常透彻，就去寻找资料浅学了一下，发现这个 $ref 还是有东西的，在平时使用也方便高效。

1.获取节点

可以使用在一般的标签上

请看下面的一小段代码，一般来讲，获取DOM元素，需要使用 document.querySelector(".PhoneNumber"）获取这个dom节点，然后再获取 PhoneNumber 的值。

但是用 ref 绑定之后，我们就不需要在获取 dom 节点了，直接在 input 标签上加上 $ref 绑定PhoneNumber，然后通过 $refs 就可正常调用。在 javascript 里面这样调用this.$refs.PhoneNumber 这样就可以减少获取dom节点的消耗了

<div id="app">
   <input ref="PhoneNumber" type="text" v-model="PhoneNumber" required  value="">
</div>

new Vue({
    el:'#app',
    data:{
       PhoneNumber：""
    },
 methods:{
   Add(){
    this.$refs.PhoneNumber.value ++ ; //this.$refs.PhoneNumber 获取dom节点
     // 使用 this.$refs.PhoneNumber 减少获取dom节点的消耗
    }
  }       
})

使用在子组件上，获取子组件的函数或属性

ref 加在子组件上，用 this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

 例如：在子组件addblog 内定义方法

methods:{
    // $ref 的测试函数
    Goalert(){
      alert("$ref可以传把子组件的方法过来")
    }
}

父组件引入子组件，并声明ref：

<!-- 导入子组件到父组件中 -->
import addblog from "./AddBlog.vue"    

 <div class="grid-content bg-purple-light">
            <!-- 引入子组件，测试 $ref -->
             <addblog ref="addblog"> </addblog> 
             <el-button type="primary" @click="Go">按钮</el-button>
 </div>

父组件里面的方法通过 ref 执行子组件的方法

Go(){   
     this.$refs.addblog.Goalert() 
    },

点击按钮，触发子组件的方法，实现父组件通过$ref使用子组件的方法

---

父组件完整代码

<template>
    <div class="grid-content bg-purple-light">
                <!-- 引入子组件，测试 $ref -->
             <addblog ref="addblog"> </addblog> 
             <el-button type="primary" @click="Go">按钮</el-button>
     </div>
</template>

<script>
    import addblog from "./AddBlog.vue"
    export default {
       components:{addblog},
        data() {
            return {
            };
        },
        methods:{
         Go(){ 
             this.$refs.addblog.Goalert()
            }
        }
    }
</script>

---

总结：

1、ref 加在普通的元素上，用 this.ref.name 获取到的是dom元素

2、ref 加在子组件上，用 this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

注意：

ref 需要在dom 渲染完成后才会有，在使用的时候确保dom已经渲染完成。

比如在生命周期 mounted(){ } 钩子中调用，或者在 this.$nextTick(()=>{ }) 中调用。

---

本人是初入前端的小菜鸟，文章如有错误，恳请大家提出问题，本人不胜感激

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力     长路漫漫，道阻且长