Vue3模板引用的操作方式示例詳解
訪問模板引用
在某些情況下我們?nèi)孕枰@取到原生的dom節(jié)點(diǎn)，可以使用ref屬性，具體操作如下:
<input?type="text"?ref="inputRef">
<script?setup>
import?{onMounted,?ref}?from?'vue'
//?必須與元素中的ref值同名，并且初始值為null
const?inputRef?=?ref(null)
//?在onMounted中以保證dom渲染完成，以防拿不到dom
onMounted(()?=>?{?
????console.log(inputRef.value)
})
</script>v-for 中的模板引用
得到的是一個(gè)裝著dom的數(shù)組
<ul>
??<li?v-for="item?in?datalist"?:key="item"?ref="itemRefs">{{?item?}}</li>
</ul>const?datalist?=?reactive([1,2,3,4,5,6])
const?itemRefs?=?ref(null)
onMounted(()?=>?{?
????console.log(itemRefs.value)??//?輸出一個(gè)數(shù)組
})函數(shù)模板引用
ref 還可以綁定為一個(gè)函數(shù)，會(huì)在每次組件更新時(shí)都被調(diào)用。該函數(shù)會(huì)收到元素引用作為其第一個(gè)參數(shù)：
<!--?這里獲取p標(biāo)簽的dom?-->
<p?:ref="(el)?=>?{getRef(el)}">name:?{{?name?}}</p>
<input?type="text"?v-model.lazy="name">const?getRef?=?(el)?=>?{?
????console.log(el)
}以上代碼中每次更新name值就會(huì)調(diào)用一次ref綁定的回調(diào)函數(shù)
改變了3次
輸出如下:
組件上的 ref
ref用在了子組件上會(huì)獲取到子組件的實(shí)例。特別注意的是如果子組件使用的不是組合式API而是使用的Vu2的選項(xiàng)式API，那么獲取到的子組件實(shí)例和該組件的this一致所以父組件可以訪問到子組件的所有屬性，如果子組件使用了<script setup>則該組件是私有的，父組件訪問不到里面的屬性，關(guān)于組件間通訊的問題以后會(huì)詳細(xì)講解。
<script?setup>
import?{?ref,?onMounted?}?from?'vue'
import?Child?from?'./Child.vue'
const?child?=?ref(null)
onMounted(()?=>?{
??//?child.value?是?<Child?/>?組件的實(shí)例
})
</script>
<template>
??<Child?ref="child"?/>
</template>以上就是Vue3模板引用的詳細(xì)內(nèi)容，更多關(guān)于Vue3模板引用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了在vue中如何引入外部的css文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue打包靜態(tài)資源后顯示空白及static文件路徑報(bào)錯(cuò)的解決
這篇文章主要介紹了vue打包靜態(tài)資源后顯示空白及static文件路徑報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
在for循環(huán)中生成的元素要加key屬性不僅是在Vue框架中是要添加的，在React框架中也是要添加的。但\其實(shí)都不是必須的，因?yàn)樵?Vue和React中不加key是不會(huì)報(bào)錯(cuò)的，只是會(huì)有警告。但是我們?cè)谏钊肓私饧觡ey的原因后會(huì)明白，若想確保沒有隱患的話，元素還是必須要加key屬性。2021-05-05
electron+vue實(shí)現(xiàn)div contenteditable截圖功能
這篇文章主要介紹了electron+vue實(shí)現(xiàn)div contenteditable截圖功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
端午將至，大家都開始吃粽子了么？本文將用vite2與vue3開發(fā)出一個(gè)招財(cái)貓小游戲，在圖案不停滾動(dòng)的同時(shí)選出可以轉(zhuǎn)出不同的素材最終得到粽子獎(jiǎng)勵(lì)，康康你能用多少次才會(huì)轉(zhuǎn)出自己喜愛口味的粽子吧2022-05-05
基于Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)表單的校驗(yàn)功能(根據(jù)條件動(dòng)態(tài)切換校驗(yàn)格式)
這篇文章主要介紹了Vue+elementUI的動(dòng)態(tài)表單的校驗(yàn)(根據(jù)條件動(dòng)態(tài)切換校驗(yàn)格式),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
Vue解決element-ui消息提示$message重疊問題
這篇文章主要為大家介紹了Vue解決element-ui消息提示$message重疊問題,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
利用webstrom調(diào)試Vue.js單頁面程序的方法教程
這篇文章主要給大家介紹了利用webstrom調(diào)試Vue.js單頁面程序的方法教程，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
這篇文章主要介紹了vue-router 路由基礎(chǔ)的詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了Vue的組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10