$el和$refs的区别

ref ：是 元素的属性，用于设置在元素上
$refs ：是 ref 的集合，集合里面包含了当前.vue中的所有 ref，用于获取普通元素中的 DOM 以及 子组件中方法/参数的
$el ：是 用于获取组件内 DOM（包括子组件，当前.vue组件，以及父组件）。

<template>
  <div class="content">
    <div>
      <el-button type="success"  @click="handleSubmit">
        確定
      </el-button>
      <!-- 设定 ref="passA" -->
      <el-button ref="passA" type="success" @click="handlePassA">
        被触发 A
      </el-button>
    </div>
    <!-- 设定 ref="passB" -->
    <div style="height:40px; width:100px; background: burlywood;" 
    ref="passB" @click="handlePassB">
      被触发 B
    </div>
  </div>
</template

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)
},

我们的再手动打印一下refs:

console.log(this.$refs);