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