Vue中$refs和$nextTick如何使用

本篇內容主要講解“Vue中$refs和$nextTick如何使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue中$refs和$nextTick如何使用”吧!

1、$refs簡介

$refs是vue提供的獲取真實dom的方法。

$refs獲取DOM元素

【使用步驟】：

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

【代碼演示】：

<template>
  <div>
    <h2>獲取原生的DOM元素</h2>
    <h5 id="h" ref="myH">我是h5標簽</h5>
  </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>
    <h2>獲取組件對象</h2>
    <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>
    <h2>獲取組件對象</h2>
    <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如何使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！