vue3中refs用法舉例小結

更新時間：2023年08月18日 09:55:03 作者：爾嶸

這篇文章主要給大家介紹了關于vue3中refs用法舉例的相關資料,Vue.js中的$refs是一個對象,它持有已注冊過ref特性的所有組件和元素,需要的朋友可以參考下

前言：

Vue 3的Refs是一種新的API，用于訪問DOM元素或組件實例。Refs提供了一個簡單的方法來訪問DOM元素或組件實例，以便在Vue組件中進行操作和處理。在Vue3中，refs用于獲取組件或DOM元素的引用，類似于Vue2中的$refs。但與Vue2不同的是，在Vue3中，refs可以是一個字符串或一個函數(shù)。

當refs是一個字符串時，在渲染時會將其關聯(lián)到相應的元素或組件上，然后可以使用.value來訪問它們：

<template>
? ? <div>
? ? ? ? <input ref="inputRef" />
? ? ? ? <button @click="handleClick">Click me</button>
? ? </div>
</template>
<script>
import { ref } from'vue';
export default {
  setup() {
    const inputRef = ref(null);
    const handleClick = () => {
      inputRef.value.focus();
    };
    return {
      inputRef,
      handleClick,
    };
  },
};
</script>

當refs是一個函數(shù)時，在渲染時會將其傳遞給組件的setup()函數(shù)，并且每當組件重新渲染時都會調(diào)用該函數(shù)。

這使得我們可以動態(tài)地創(chuàng)建和更新引用：

<template>
? ? <div>
? ? ? ? <MyComponent :ref="refHandler" />
? ? </div>
</template>
<script>
import { ref, onMounted } from 'vue';
import MyComponent from './MyComponent.vue';
export default {
  components: {
    MyComponent,
  },
  setup() {
    const refHandler = (el) => {
      console.log(el); // 打印組件實例或DOM元素
    };
? ? onMounted(() => {
      console.log(refHandler.value); 
    });
    return {
      refHandler,
    };
  },
};
</script>

我們使用onMounted生命周期函數(shù)，在組件掛載時訪問了myRef引用。由于myRef引用與我們的<div>元素相關聯(lián)，myRef.value將是這個元素的實際DOM元素。我們可以使用這個元素來執(zhí)行任何我們需要的操作

需要注意的是，當使用函數(shù)ref時，如果組件沒有被渲染或者已經(jīng)被銷毀，那么被傳遞給ref的回調(diào)函數(shù)參數(shù)將為null。

總結

到此這篇關于vue3中refs用法舉例的文章就介紹到這了,更多相關vue3 refs用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: