当前位置:首页 > 开发教程 > js/jQuery教程 >

详细介绍Vue中$refs和$nextTick的使用办法

时间:2022-03-15 19:06 来源:未知 作者:谢谢你给的幸福 收藏

这篇文章主要为大家介绍了Vue中$refs和$nextTick的使用方法,文中的示例代码讲解详细,对我们学习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>

【控制台效果】:

详细介绍Vue中$refs和$nextTick的使用办法

$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>

【效果展示】:

详细介绍Vue中$refs和$nextTick的使用办法

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>

【效果演示】:

详细介绍Vue中$refs和$nextTick的使用办法

利用$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>

【效果演示】:

详细介绍Vue中$refs和$nextTick的使用办法

$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的使用办法

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


js/jQuery教程阅读排行

最新文章