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

这篇文章主要为大家介绍了Vue中$refs和$nextTick的使用方法，文中的示例代码讲解详细，对我们学习Vue有一定帮助，需要的可以参考一下

目录

• 1、$refs简介
• $refs获取DOM元素
• $refs获取组件对象
• 2、$nextTick基本使用
• vue异步更新DOM
• 利用$nextTick解决以上问题
• $nextTick使用场景

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>

【效果】：

到此这篇关于详解Vue中$refs和$nextTick的使用方法的文章就介绍到这了,更多相关Vue $refs $nextTick内容请搜索北冥有鱼以前的文章或继续浏览下面的相关文章希望大家以后多多支持北冥有鱼！

您可能感兴趣的文章:

• vue2从数据变化到视图变化发布订阅模式详解
• Vue数据更新视图不更新的几种解决方案小结
• 解决vue中数据更新视图不更新问题this.$set()方法
• Vue中this.$nextTick()的理解与使用方法
• Vue nextTick获取更新后的DOM的实现
• vue2从数据变化到视图变化之nextTick使用详解