VUE $refs 与 $el 最强详解

$refs 与 $el 是什么？ 作用是什么?  ref，$refs，$el ，三者之间的关系是什么？看本博主为您带来的最新文章，通过大量的列子来给你讲解，请带上你聪明的大脑，在这个过程中希望你可以举一反三。

ref  (给元素或者子组件注册引用信息)  就像你要给元素设置样式，就需要先给元素设定一个 class 一样，同理，你想获取哪个元素的 DOM，就给这个元素先设定一个 ref，其实这里和 JS 中的 document.各种方法获取 DOM 差不多，不过 ref 是访问 VUE 虚拟出来的DOM，这样可以有效的减少性能消耗

简述三者区别：

ref ：是 元素的属性，用于设置在元素上

$refs ：是 ref 的集合，集合里面包含了当前.vue中的所有 ref

用于获取普通元素中的 DOM 以及 子组件中方法/参数的

$el ：是 用于获取组件内 DOM（包括子组件，当前.vue组件，以及父组件）

目录

case 1：点击按钮“确定”触发其他元素上的事件

case 2：页面加载，获取当前.vue文件中整体元素高度

case 3：父组件，调用子组件内的方法/参数（这里的例子是页面加载直接调用）

case 4：什么情况/场景中使用 this.$nextTick(()=>{})，它的作用是什么？

---

case 1：点击按钮“确定”触发其他元素上的事件

handleSubmit(){
    /*
    * 有同学看到这里会问：咦，博主，你这里写法为什么不同呀？
    * 嗯，这位同学不错，问到正题上了，避免了你在实际运用中出现问题
    * 因为 ref="passA" 的按钮，它是 element ui 提供的组件，
    * 组件本身不是 DOM，所以需要 .$el 的帮助后才能提取组件的 DOM
    * 反之，对于提取普通元素上的 DOM ，就不需要了
    */
    this.$refs.passA.$el.click()
    this.$refs.passB.click()

    console.log(this.$refs)
},
handlePassA(){
    console.log('我是 PassA, 我报触发了')
    console.log('我自己的高度 =>',this.$refs.passA.$el.offsetHeight)
},
handlePassB(){
    console.log('我是 PassB, 我报触发了')
    console.log('我自己的高度 =>',this.$refs.passB.offsetHeight)
},

case 2：页面加载，获取当前.vue文件中整体元素高度

mounted(){
    /*
    * 这里通过 this.$el 直接获取当前.vue文件整体 DOM
    */
    console.log(this.$el)
    console.log('我是 当前.vue文件 整体的高度 =>',this.$el.offsetHeight)
    console.log('我是 PassB 我自己的高度 =>',this.$refs.passB.offsetHeight)
},

 这里通过 class=“content” 与上图中控制台输出的 整体DOM最外层的 calss 比照，可以更好的理解

case 3：父组件，调用子组件内的方法/参数（这里的例子是页面加载直接调用）

case 4：什么情况/场景中使用 this.$nextTick(()=>{})，它的作用是什么？

data(){
    return{
        text: '我今年12岁'
    }
},
methods: {
    handleSubmit(){
        /*
        * 为什么我打印出来的不是 【我今年13岁】 呢？
        * 因为 DOM 的值还没有更新完毕，所以这里打印的依然是【我今年12岁】
        */
        this.text = '我今年13岁'
        console.log('打印 =>',this.$refs.myDiv.innerHTML) // 打印结果：我今年12岁
    }
}

created(){
    console.log('created =>',this.$refs.myDiv)
    /*
     * 因为生命周期执行顺序的缘故，vue 实例刚刚创建完毕 ， DOM 还没有进行渲染，所以
     * 打印结果：created => undefined
     * 如果你在这里输出 this.$refs.myDiv.innerHTML 控制台还会报错，提示 myDiv 不存在
     */
    this.$nextTick(()=>{
        console.log('created =>',this.$refs.myDiv.innerHTML)
        /*
         * this.$nextTick 监视 DOM 的更新
         * 会进入 红灯停状态，DOM 更新完毕后，就会进入 绿灯行驶状态
         * 打印结果：created => 我今年12岁
         */
    })
},
methods: {
    handleSubmit(){
        this.text = '我今年13岁'
        /*
        * this.$nextTick 的作用是什么？
        * 它的作用类似：前方道路正在施工，施工完毕后可正常行驶
        * DOM 更新完毕后，就会执行 this.$nextTick 内的代码
        */
        this.$nextTick(()=>{
            console.log('打印 =>',this.$refs.myDiv.innerHTML) // 打印结果：我今年13岁
        })
    }
}

喂，同学，不错呦，竟然全都看完了，加油！

想要看其他的 case，也可以通过评论或者私聊给我呦！

如果文章对你有帮忙，给博主加个关注，鼓励博主创造出更多的帖子！