快捷導(dǎo)航

Vue3中refs使用方法舉例

更新時(shí)間：2024年08月07日 09:28:23 作者：JackHuan_code

在Vue中Refs是對(duì)DOM元素或已安裝到DOM的其他組件實(shí)例的引用,下面這篇文章主要給大家介紹了關(guān)于Vue3中refs使用的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在 Vue 3 中，refs 的用法與 Vue 2 相比有了一些改進(jìn)，但基本概念仍然相同：通過(guò) ref 來(lái)引用模板中的元素或組件實(shí)例，然后在組件的方法或生命周期鉤子中通過(guò) this.$refs 來(lái)訪問(wèn)這些引用。

然而，在 Vue 3 的 Composition API 中，我們更傾向于使用 ref 函數(shù)來(lái)創(chuàng)建響應(yīng)式引用，而不是使用 this.$refs。這種方式使代碼更加靈活，并且更易于在組合式函數(shù)中使用。

下面我將分別展示 Vue 3 中 Options API 和 Composition API 的 refs 寫(xiě)法。

使用 Options API 選項(xiàng)式

在 Options API 中，refs 的使用與 Vue 2 類似：

<template>
  <div ref="myDiv">Hello, Vue 3!</div>
  <button ref="myButton" @click="handleClick">Click me</button>
</template>

<script>
export default {
  mounted() {
    // 通過(guò) this.$refs 訪問(wèn)元素
    const myDiv = this.$refs.myDiv;
    const myButton = this.$refs.myButton;
    console.log(myDiv); // 輸出 div DOM 元素
    console.log(myButton); // 輸出 button DOM 元素
  },
  methods: {
    handleClick() {
      const myButton = this.$refs.myButton;
      // 在這里可以對(duì) myButton 進(jìn)行操作
    }
  }
}
</script>

使用 Composition API 組合式

在 Composition API 中，你會(huì)使用 ref 函數(shù)來(lái)創(chuàng)建響應(yīng)式引用，并在 setup 函數(shù)中訪問(wèn)它們：

<template>
  <div ref="myDiv">Hello, Vue 3!</div>
  <button @click="handleClick">Click me</button>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    // 使用 ref 函數(shù)創(chuàng)建響應(yīng)式引用
    const myDiv = ref(null);

    // 生命周期鉤子在 Composition API 中通過(guò)函數(shù)實(shí)現(xiàn)
    onMounted(() => {
      console.log(myDiv.value); // 輸出 div DOM 元素
    });

    // 方法也作為函數(shù)返回
    const handleClick = () => {
      console.log(myDiv.value); // 輸出 div DOM 元素
      // 在這里可以對(duì) myDiv.value 進(jìn)行操作
    };

    // 返回需要在模板中使用的響應(yīng)式引用和方法
    return {
      myDiv,
      handleClick
    };
  }
}
</script>

在 Composition API 的例子中，我們使用了 ref 函數(shù)來(lái)創(chuàng)建一個(gè)響應(yīng)式引用 myDiv，并將其綁定到模板中的 div 元素上。在 setup 函數(shù)中，我們可以直接訪問(wèn) myDiv.value 來(lái)獲取對(duì)應(yīng)的 DOM 元素。注意，由于 ref 創(chuàng)建的是一個(gè)包裝對(duì)象，因此我們需要通過(guò) .value 來(lái)訪問(wèn)或修改其值。

onMounted 是 Vue 3 的 Composition API 提供的一個(gè)生命周期鉤子，它等價(jià)于 Options API 中的 mounted 鉤子。在 onMounted 中，我們可以安全地訪問(wèn) DOM 元素，因?yàn)榇藭r(shí)組件已經(jīng)被掛載到 DOM 中了。

最后，setup 函數(shù)返回一個(gè)對(duì)象，其中包含了需要在模板中使用的響應(yīng)式引用和方法。這樣，模板中的 ref 就可以與 setup 中定義的響應(yīng)式引用關(guān)聯(lián)起來(lái)。