Vue3如何在setup中獲取元素引用(ref)
Vue3在setup中獲取元素引用(ref)
在非setup鉤子中, 我們可以通過this.$refs來獲取指定元素，但是setup中沒有"this"，所以要用其他方式來獲取元素。
一、關(guān)于ref關(guān)鍵字
在setup函數(shù)中，可以使用ref函數(shù)，用于創(chuàng)建一個響應(yīng)式數(shù)據(jù)，當數(shù)據(jù)發(fā)生改變時，Vue會自動更新UI
一定要注意，ref創(chuàng)建的是一個響應(yīng)式數(shù)據(jù)。這個在VUE3.0中非常靈活，幾乎是怎么玩都行的。具體后邊還會說到，這里大概說一下基本用法。
1、引入ref
import { ref} from "vue";2、使用注意點
在 VUE 的模板中使用 ref 的值不需要通過 value 獲取 （Vue 會通過自動給 ref 的值加上 .value）
在 js 中使用 ref 的值必須使用 .value 獲取
二、在setup中引用元素
1、借助 ref() 函數(shù)
<template>
? ?<div ref="divRef" />
</template>
<script setup>
? import { ref } from 'vue'
? const divRef = ref(null)
? divRef.value
</script>2、找到 this
通過 getCurrentInstance() 可以獲得 vue 實例對象
<template>
? ?<div ref="divRef" />
</template>
<script setup>
? import { getCurrentInstance, onMount } from 'vue'
? onMount(() => {
? ? getCurrentInstance().ctx.$refs.divRef
? })
</script>注意，使用 getCurrentInstance 是有一些限制的，可以參考官方說明
3、使用 :ref
當ref的值是一個函數(shù)的時候, 我們必須用":ref", 函數(shù)只有一個參數(shù), 那就是當前元素
<template>
? ?<div :ref="getDivRef" />
</template>
<script setup>
? import { ref } from 'vue'
? let divRef = ref(null)
? const getDivRef = (el) => {
? ? divRef.value = el
? }
</script>Vue3使用ref獲取元素節(jié)點解析
Vue2 中的 ref
<template>
<div id="app">
<div ref="hello">小豬課堂</div>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.hello); // <div>小豬課堂</div>
},
};
</script>Vue3 中 ref 訪問元素
<template>
<div ref="hello">小豬課堂</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const hello = ref<any>(null);
onMounted(() => {
console.log(hello.value); // <div>小豬課堂</div>
});
</script>運行結(jié)果：
注意點：
1.變量名稱必須要與 ref 命名的屬性名稱一致。
2.通過 hello.value 的形式獲取 DOM 元素。
3.必須要在 DOM 渲染完成后才可以獲取 hello.value，否則就是 null。
v-for 中使用 ref
<template>
<div ref="hello">小豬課堂</div>
<ul>
<li v-for="item in 10" ref="itemRefs">
{{item}} - 小豬課堂
</li>
</ul>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const itemRefs = ref<any>([]);
onMounted(() => {
console.log(itemRefs.value);
});
</script>運行的結(jié)果：
注意點：我們似乎沒辦法區(qū)分哪個 li 標簽?zāi)膫€ ref，除此之外，我們的 itemRefs 數(shù)組不能夠保證與原數(shù)組順序相同，即與 list 原數(shù)組中的元素一一對應(yīng)。
:ref 綁定函數(shù)
ref 屬性接收的是一個 setHelloRef 函數(shù)，該函數(shù)會默認接收一個 el 參數(shù)，這個參數(shù)就是我們需要獲取的 div 元素。假如需求中我們采用這種方式的話，那么完全可以把 el 保存到一個變量中去，供后面使用。
<template>
<div :ref="setHelloRef">小豬課堂</div>
</template>
<script setup lang="ts">
import { ComponentPublicInstance, HTMLAttributes } from "vue";
const setHelloRef = (el: HTMLElement | ComponentPublicInstance | HTMLAttributes) => {
console.log(el); // <div>小豬課堂</div>
};
</script>v-for的更改后使用：方法1
<template>
<ul>
<li v-for="item in 10" :ref="(el) => setItemRefs(el, item)">
{{ item }} - 小豬課堂
</li>
</ul>
</template>
<script setup lang="ts">
import { ComponentPublicInstance, HTMLAttributes, onMounted } from "vue";
let itemRefs: Array<any> = [];
const setItemRefs = (el: HTMLElement | ComponentPublicInstance | HTMLAttributes, item:number) => {
if(el) {
itemRefs.push({
id: item,
el,
});
}
}
onMounted(() => {
console.log(itemRefs);
});
</script>運行的結(jié)果：
這種形式既讓我們的操作性變得更大，還解決了 v-for 循環(huán)是 ref 數(shù)組與原數(shù)組順序不對應(yīng)的問題。
v-for的更改后使用：方法2
<template>
<div ref='getDivDom' v-for="item in list" :data-id="item.id"></div>
</template>
<script setup>
import { ref} from 'vue'
const divDomList = ref(new Map());
const getDivDom = el=>{
if(el){
divDomList.set(el.dataset['id'],el)
}
}
// const el =divDomList.get(id) // 根據(jù)list數(shù)據(jù)中的id值 獲取對應(yīng)的dom元素 組件上使用 ref
<template>
<child ref="childRef"></child>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import child from "./child.vue";
const childRef = ref<any>(null);
onMounted(() => {
console.log(childRef.value); // child 組件實例
console.log(childRef.value.message); // undefined
});
</script><template>
<div>{{ message }}</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const message = ref<string>("我是子組件");
const onChange = () => {};
</script>運行的結(jié)果
childRef.value.message 為 undefined，這也是與 Vue2 的不同之處。在 Vue3 中，使用 ref 獲取子組件時，如果想要獲取子組件的數(shù)據(jù)或者方法，子組件可以通過defineExpose 方法暴露數(shù)據(jù)。
改進組件上使用 ref的寫法
修改子組件代碼：
<template>
<div>{{ message }}</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const message = ref<string>("我是子組件");
const onChange = () => {
console.log("我是子組件方法")
};
defineExpose({
message,
onChange
});
</script>父組件再次獲?。?/strong>
const childRef = ref<any>(null);
onMounted(() => {
console.log(childRef.value); // child 組件實例
console.log(childRef.value.message); // 我是子組件
childRef.value.onChange(); // 我是子組件方法
});運行的結(jié)果：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue使用@include或@mixin報錯的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
vue js秒轉(zhuǎn)天數(shù)小時分鐘秒的實例代碼
這篇文章主要介紹了vue js秒轉(zhuǎn)天數(shù)小時分鐘秒的實例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
Vue.js中的全局錯誤處理函數(shù)errorHandler用法
這篇文章主要介紹了Vue.js中的全局錯誤處理函數(shù)errorHandler用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家詳細介紹了Vue2項目如何使用pdfjs-dist解析pdf相關(guān),文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-05-05
這篇文章主要介紹了vue如何讀取外部配置文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
文章介紹了vue中向子組件傳值并允許修改的機制,通過defineModel實現(xiàn)雙向綁定,它返回一個ref,并且可以配置底層prop的選項,本文結(jié)合實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2025-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)搜索過濾效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了vue實現(xiàn)登錄功能的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
基于vue和react的spa進行按需加載的實現(xiàn)方法
這篇文章主要介紹了基于vue和react的spa進行按需加載,需要的朋友可以參考下2018-09-09
今天小編就為大家分享一篇Vue項目查看當前使用的elementUI版本的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09