vue3中refs用法舉例小結(jié)
前言：
Vue 3的Refs是一種新的API，用于訪問DOM元素或組件實例。Refs提供了一個簡單的方法來訪問DOM元素或組件實例，以便在Vue組件中進(jìn)行操作和處理。在Vue3中，refs用于獲取組件或DOM元素的引用，類似于Vue2中的$refs。但與Vue2不同的是，在Vue3中，refs可以是一個字符串或一個函數(shù)。
當(dāng)refs是一個字符串時，在渲染時會將其關(guān)聯(lián)到相應(yīng)的元素或組件上，然后可以使用.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>當(dāng)refs是一個函數(shù)時，在渲染時會將其傳遞給組件的setup()函數(shù)，并且每當(dāng)組件重新渲染時都會調(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>元素相關(guān)聯(lián)，myRef.value將是這個元素的實際DOM元素。我們可以使用這個元素來執(zhí)行任何我們需要的操作
需要注意的是，當(dāng)使用函數(shù)ref時，如果組件沒有被渲染或者已經(jīng)被銷毀，那么被傳遞給ref的回調(diào)函數(shù)參數(shù)將為null。
總結(jié)
到此這篇關(guān)于vue3中refs用法舉例的文章就介紹到這了,更多相關(guān)vue3 refs用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用生成條形碼并打印和vue-print-nb以及報錯問題的解決
在TypeScript項目中,正確安裝vue3-print-nb并配置env.d.ts聲明模塊,添加tsconfig.json的include路徑,確保全局掛載以實現(xiàn)條形碼和批量打印功能2025-07-07
在Vue中，computed屬性是一種計算屬性，它的值是根據(jù)其他數(shù)據(jù)的值動態(tài)計算出來的，下面小編主要來和大家聊聊Vue 3的組合式API中如何使用computed屬性，感興趣的小伙伴快跟隨小編一起了解一下吧2023-06-06
使用vue + less 實現(xiàn)簡單換膚功能的示例
下面小編就為大家分享一篇使用vue + less 實現(xiàn)簡單換膚功能的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
webpack+vue中使用別名路徑引用靜態(tài)圖片地址
這篇文章主要介紹了webpack+vue中使用別名路徑引用靜態(tài)圖片地址，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
文章介紹了使用ElementUI時如何自定義校驗規(guī)則,包括將校驗邏輯封裝為JavaScript文件,通過`validator`和`trigger`屬性定義校驗方法和觸發(fā)條件等2026-04-04
Vue.js是目前很火的一個前端框架，采用MVVM模式設(shè)計，它是以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建的。本文重點(diǎn)給大家介紹Vuejs開發(fā)環(huán)境搭建及熱更新的相關(guān)知識，需要的朋友參考下吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue遞歸實現(xiàn)樹形組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
v-if和v-show可能是日常開發(fā)中最常用的兩個指令，雖然看上去兩者功能是類似的，但是兩者還是存在很大區(qū)別的。接下來通過本文給大家分享vue渲染時閃爍{{}}的問題及解決方法，感興趣的朋友一起看看吧2018-03-03
這篇文章主要介紹了Vue element-ui父組件控制子組件的表單校驗操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue3封裝Element導(dǎo)航菜單的實例代碼,分為菜單數(shù)據(jù)格式示例,控制導(dǎo)航收縮的詳細(xì)代碼,本文通過實例代碼介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03