详解Vue中$refs和$nextTick的使用方法

时间：2023-01-20 09:33:57|栏目：vue|点击：次

1、$refs简介

$refs是vue提供的获取真实dom的方法。

$refs获取DOM元素

【使用步骤】：

在原生DOM元素上添加ref属性利用this.$refs获取原生的DOM元素

【代码演示】：

<template>
  <div>
    <h1>获取原生的DOM元素</h1>
    <h4 id="h" ref="myH">我是h4标签</h4>
  </div>
</template>

<script>
export default {
  // 在挂载之后获取原生dom
  mounted() {
    console.log(document.getElementById("h"));
    // this.$refs是vue对象中特有的属性
    console.log(this.$refs.myH);
  },
};
</script>

<style>
</style>

【控制台效果】：

$refs获取组件对象

【代码演示】：

<template>
  <div>
    <h1>获取组件对象</h1>
    <Demo ref="myCom"></Demo>
  </div>
</template>

<script>
import Demo from "@/components/Demo";
export default {
  mounted() {
    console.log(this.$refs.myCom);
    // 获取子组件对象
    let demo = this.$refs.myCom;
    // 调用子组件中的方法
    demo.fn();
  },
  components: {
    Demo,
  },
};
</script>

<style>
</style>

【效果展示】：

2、$nextTick基本使用

$nextTick等待dom更新之后执行方法中的函数体

vue异步更新DOM

【vue异步更新演示】：

<template>
  <div>
    <h1>获取组件对象</h1>
    <Demo ref="myCom"></Demo>
  </div>
</template>

<script>
import Demo from "@/components/Demo";
export default {
  mounted() {
    console.log(this.$refs.myCom);
    // 获取子组件对象
    let demo = this.$refs.myCom;
    // 调用子组件中的方法
    demo.fn();
  },
  components: {
    Demo,
  },
};
</script>

<style>
</style>

【效果演示】:

利用$nextTick解决以上问题

【代码演示】：

<template>
  <div>
    <p>vue异步更新dom</p>
    <p ref="mycount">{{ count }}</p>
    <button @click="add1">点击+1，马上获取数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },

  methods: {
    add1() {
      this.count++;
      // console.log(this.$refs.mycount.innerHTML);

      // 解决异步更新问题
      // dom更新完成之后会顺序执行this.$nextTick（）中的函数体
      this.$nextTick(() => {
        console.log(this.$refs.mycount.innerHTML);
      });
    },
  },
};
</script>

<style>
</style>

【效果演示】：

$nextTick使用场景

【代码演示】：

<template>
  <div>
    <p>$nextTick()使用场景</p>
    <input
      ref="search"
      v-if="isShow"
      type="text"
      placeholder="这是一个输入框"
    />
    <button @click="search">点击-立即搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },

  methods: {
    search() {
      this.isShow = true;
      this.$nextTick(() => {
        this.$refs.search.focus();
      });
    },
  },
};
</script>

<style>
</style>

【效果】：