vue中ref引用操作DOM元素

前言

在javascript中，我们用原生的方式获取页面中的DOM元素，并操作它们。后来，有了jquery，jquery的强大就在于它可以很方便的操作DOM元素。

在vue中，如何操作DOM元素呢？

首先，在vue中强烈禁用原生与jquery来操作DOM元素。我们要充分的利用vue的优势：MVVM，在vue中程序员几乎不操作DOM，只需要维护好数据即可，vue给程序员提供ref引用，不调用api直接获取元素组件的使用

一，$refs对象介绍及基本用法

refs对象的介绍：在每个vue的组件实例上，都包含一个$ref对象==存储着对应的==DOM元素==或==组件==的引用，==默认情况下，组件的$refs指向一个空对象，凡是以$开头的，都是vue的内置对象

基础使用方法（获取DOM元素）：比如我们要获取h1,则我们给它取一个名字并放入ref中，代码如下：

    <h1 ref="myh1">App 根组件</h1>

在引用时，只需在js中：

      this.$refs.myh1.style.color = "red";

既可以成功操作：

我们来看看现在的refs中是不是多了myh1这一个成员：

总结一下：vue中有一个$refs对象，默认为空。当我们在DOM元素中为其设置ref值后，相当于在vue的内置对象 $refs中添加了新的成员，我们如果需要操作DOM对象直接通过 $refs获取即可。

二，使用ref引用组件实例

ref除了可以引入DOM元素，还可以引入组件。可以拿到组件并操控里面的方法与数据
大家请看left组件结构

<template>
  <div class="left-container">
    <h3>left组件------{{ count }}</h3>
    <button @click="count += 1">+1</button>
    <button @click="resetCount">重置</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
        resetCount() {
            this.count = 0;
        }
    }
}
</script>

<style>
    .left-container {
        height: 200px;
        background-color: orange;
    }
</style>

在我将Left组件导入到App.vue后，我想在App组件中操作Left组件中的元素，比如，我想重置Left组件的count值为0：
首先，与操作DOM元素一样，我要先给Left组件一个ref值：

      <Left ref="comLeft"></Left>

在添加ref后，我们再去观察$refs，多了成员comLeft：

接着，我再设置一个按钮，要求按钮按下后，重置Left组件中的count值为0：

    <button @click="onReset">重置Left组件的count值为0</button>

然后设置onReset函数：（用到$refs中的comLeft）

    onReset() {
      this.$refs.comLeft.resetCount();
    }

三，ref的使用案例

3.1 案例需求

案例需求：实现按钮和文本框的按需展示：
有输入框->看不到按钮；
有按钮->看不到输入框。

3.2 思路与做法

首先写出结构，一个输入框与一个按钮。点击按钮时，按钮消失，输入框失去焦点，输入框消失：
通过上述分析，我们可以知道大的方向是要有一个布尔值，默认如果布尔值为false，则默认展示按钮隐藏输入框，否则（true）展示输入框隐藏按钮。

需要用到的知识：
用@click=“”绑定点击事件；v-if与v-show控制元素是否显示（动态的添加与删除元素）；使用ref绑定输入框，并使用输入框的focus来控制输入框的焦点。

代码如下：

    <!-- 小demo -->
    <input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef"/>
    <button v-else @click="showInput">展示输入框</button>

  data() {
    return {
      //控制输入框和按钮的按需切换，默认值为false表示默认展示按钮隐藏输入框
      inputVisible: false
    }
  },
  methods: {
    showThis() {
      console.log(this);
      console.log(this.$refs.myh1);
      console.log(this.$refs.comLeft);
      this.$refs.myh1.style.color = "red";
    },
    onReset() {
      console.log(this.$refs);
      this.$refs.comLeft.resetCount();
    },
    showInput() {
      //切换布尔值，把文本框展示出来
      this.inputVisible = true;
      //让展示出来的文本框自动获取焦点
       this.$refs.iptRef.focus();
    },
    showButton() {
      this.inputVisible = false;
    }
  },

请自行编译上述代码会发现问题：虽然showInput提供方法让展示出来的文本框自动获得焦点，但是在页面中却无法实现。

3.2 为什么页面上无法自动获得焦点

因为当布尔值变成true的时候，页面还没来得及更新，这里就跟声明周期有关系了，js是单线程，从上往下渲染，布尔值变成true，还是一个将要展示，还没有展示的状态，所以在页面中渲染不出来：

解决方法是：保证页面先更新完再执行这个操作，延迟this.$refs.iptRef.focus()的使用在这里插入代码片

如何延迟？我们能不能把这个操作放在updated中？==答案是不能，因为触发updated的条件是，只要数据发生变化就可以触发。所以，当this.inputVisible发生变化，就会触发事件。（updated：数据更新后，完成虚拟DOM的重新渲染和打补丁。组件DOM已完成更新，可执行依赖的DOM操作。注意：不要在此函数中操作数据（修改属性），会陷入死循环）

那么，有什么更好的解决方法呢？

3.3 this.$nextTick(cb)

组件的this.$nextTick(cb)方法，会把cb回调推迟到下一个DOM更新周期之后执行
理解：等组件DOM更新完成后，再执行cb回调函数，从而保证cb回调可操作最新的DOM元素
用法：在括号中(cb回调函数)放入箭头函数并执行操作

    showInput() {
      //切换布尔值，把文本框展示出来
      this.inputVisible = true;
      //让展示出来的文本框自动获取焦点
      // this.$refs.iptRef.focus();
      this.$nextTick(() => {
        this.$refs.iptRef.focus();
      })
    }

3.4 整体代码

<template>
  <div class="app-container">
    <h1 ref="myh1">App 根组件</h1>
    <button @click="showThis">打印 this</button>
    <button @click="onReset">重置Left组件的count值为0</button>
    <hr />

    <!-- 小demo -->
    <input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef"/>
    <button v-else @click="showInput">展示输入框</button>
    <!-- 渲染Left组件 -->
    <div class="box">
      <Left ref="comLeft"></Left>
    </div>
  </div>
</template>

<script>
import Left from "./components/Left.vue";
// console.log($refs);
export default {
  data() {
    return {
      //控制输入框和按钮的按需切换，默认值为false表示默认展示按钮隐藏输入框
      inputVisible: false
    }
  },
  methods: {
    showThis() {
      console.log(this);
      console.log(this.$refs.myh1);
      console.log(this.$refs.comLeft);
      this.$refs.myh1.style.color = "red";
    },
    onReset() {
      console.log(this.$refs);
      this.$refs.comLeft.resetCount();
    },
    showInput() {
      //切换布尔值，把文本框展示出来
      this.inputVisible = true;
      //让展示出来的文本框自动获取焦点
      // this.$refs.iptRef.focus();
      this.$nextTick(() => {
        this.$refs.iptRef.focus();
      })
    },
    showButton() {
      this.inputVisible = false;
    }
  },
  components: {
    Left,
  },
  // updated() {
  //   this.$refs.iptRef.focus();
  // }错误，只要数据变化，就会触发updated
};
</script>

<style>
</style>

四，总结

看完这节知识相信已经学会了如何操作页面中的DOM元素与组件，并知晓了在页面DOM元素更新完后如何操作元素的方法与原理。

后面的vue版块会一直更新，感谢喜欢，欢迎收藏关注！