VUE中$refs和$el的使用详解

ref: 给元素或者子组件注册引用信息

ref有三种用法：

1.ref加在普通元素上，获取用this.$ref.xxx可以获取到dom元素。

<div ref="system">测试</div>
// 获取
mounted() {
  console.log(this.$refs.system);
}

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

使用：

// this.$ref.xxx.方法名()

// 父组件
<contact-info ref="contactInfo"/>
import ContactInfo from './ContactInfo'
components: { ContactInfo },
mounted() {
   this.$refs.contactInfo.initVal(data) // 调用子组件方法
}

// 子组件
methods: {
  initVal(data){
    Object.keys(this.contactInfo).forEach(val=>{
      this.contactInfo[val] = data[val]
    })
  }
}

3.利用v-for和ref组合获取一组dom节点

在通过v-for 遍历获取一组ref时记得加：，即:ref=“xxx”
当v-for用于元素或者组件的时候，引用信息将是包含dom节点或者组件实例的数组。
加冒号说明后面是一个变量或者是表达式，不加冒号后面就是字符串常量。

ref使用过程中需要注意的点：
1.获取ref要确保在dom已经渲染完成，比如可以在vue生命周期的mounted() {}钩子函数中调用，或者可以在this.$nextTick(() => {})中调用。
2.在页面初始渲染的时候是不能访问ref的，因为此时ref还不存在， $ref也不是响应式的，不能在模板中做数据绑定。
3.在vue中用ref来获取dom的时候，可能会出现this. $refs.xxx 为undefined的情况

(1)场景一：在created()中使用

在这个生命周期中进行数据观测、属性和方法的运算，watch事件回调，但是此时dom还没有渲染完成，是不能通过ref调用dom的。
解决在mounted中调用或者使用nextTick。

(2)场景二：父元素或者当前元素使用了v-if或者v-show

因为 $ref不是响应式的，只在组件渲染完之后才会生效，在初始渲染的时候是不存在的
因为是非响应式的，所有动态加载的模板更新它都无法相应的变化
解决：通过setTimeout(() => {…}, 0)来实现

$el: 获取Vue组件实例挂载的DOM元素
$el读取的是组件实例挂载的dom元素

// 子组件
<template>
  <div>
    测试
  </div>
</template>
<script>
export default {
  name: 'TestComs'
};
</script>

// 父组件
   <test ref="testCom" />
   <div ref="test">11</div>
  mounted() {
    console.log(this.$refs.testCom, '组件ref'); // 获取组件实例
    console.log(this.$refs.testCom.$el, '组件el'); // 获取组件实例的dom元素
    console.log(this.$refs.test, '元素ref'); // 获取dom元素
    console.log(this.$refs.test.$el, '元素el'); // $el用于vue组件，普通dom元素不能用
  },

结果如下图：