$refs的基本用法

ref 有三种用法

1. ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素
2. ref加在子组件上，用this.$refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了
3. 如何利用v-for 和 ref 获取一组数组或者dom 节点

应注意的坑

1. ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
2. 如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。

示例

<!--
 * @Description: v-shwo与v-if代码
 * @Author: HMM
 * @Date: 2021-01-21 19:49:56
-->
<template>
  <div class="test">
    <el-container>
      <el-header>
        <el-button type="primary" @click="setTabNum(1)">切换1</el-button>
        <el-button type="success" @click="setTabNum(2)">切换2</el-button>
        <el-button  @click="testRefs()">测试ref用法</el-button>
      </el-header>
      <el-main>
        <h1>v-show使用：</h1>
        <br />
        <div v-show="tabNum === 1" ref="tabShow1">show - 页面1</div>
        <div v-show="tabNum === 2" ref="tabShow2">show - 页面2</div>
        <br />
        <hr />
        <br />
        <h1>v-if使用：</h1>
        <br />
        <div v-if="tabNum === 1" ref="tabIf1">if - 页面1</div>
        <div v-if="tabNum === 2" ref="tabIf2">if - 页面2</div>
      </el-main>
    </el-container>
  </div>
</template>



<!-- JS -->
<script>
export default {
  data() {
    return {
      tabNum: 1
    };
  },
  methods: {
    /**
     * @description: 切换事件
     * @param {*} num Number类型
     * @return {*}
     */
    setTabNum(num) {
      this.tabNum = num;
    },
    /**
     * @description: 测试ref用法
     * @param {*}
     * @return {*}
     */
    testRefs(){
      console.log('v-show: 1', typeof this.$refs.tabShow1);
      console.log('v-show: 2', typeof this.$refs.tabShow2);
      console.log('v-if: 1', typeof this.$refs.tabIf1);
      console.log('v-if: 2', typeof this.$refs.tabIf2);
    }
  }
};
</script>

参考链接：
vue$refs用法