快捷導(dǎo)航

Vue3中refs使用方法舉例

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

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

前言

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

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

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

使用 Options API 選項式

在 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() {
    // 通過 this.$refs 訪問元素
    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;
      // 在這里可以對 myButton 進(jìn)行操作
    }
  }
}
</script>

使用 Composition API 組合式

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

<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 中通過函數(shù)實現(xiàn)
    onMounted(() => {
      console.log(myDiv.value); // 輸出 div DOM 元素
    });

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

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

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

onMounted 是 Vue 3 的 Composition API 提供的一個生命周期鉤子，它等價于 Options API 中的 mounted 鉤子。在 onMounted 中，我們可以安全地訪問 DOM 元素，因為此時組件已經(jīng)被掛載到 DOM 中了。

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