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

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

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

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

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

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