Vue3模板引用的操作方式示例詳解
更新時(shí)間：2023年06月16日 09:46:35 作者：mdnice
這篇文章主要為大家介紹了Vue3模板引用的操作方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
訪問模板引用
在某些情況下我們?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兼容ie9的問題全面解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
Vue使用keep-alive實(shí)現(xiàn)頁面前進(jìn)刷新、后退緩存全過程
本文介紹了如何在Vue單頁應(yīng)用中使用keep-alive實(shí)現(xiàn)頁面前進(jìn)刷新、后退緩存,解決了從搜索頁跳轉(zhuǎn)到列表頁需要重新加載數(shù)據(jù)以及從詳情頁返回列表頁希望保留滾動(dòng)位置和篩選狀態(tài)的問題,通過合理使用keep-alive組件結(jié)合路由元信息管理,可以實(shí)現(xiàn)智能緩存策略2025-10-10
詳解Vue-cli webpack移動(dòng)端自動(dòng)化構(gòu)建rem問題
這篇文章主要介紹了詳解Vue-cli webpack移動(dòng)端自動(dòng)化構(gòu)建rem問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了vue3中如何實(shí)現(xiàn)定義全局變量，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報(bào)錯(cuò)問題
這篇文章主要介紹了如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報(bào)錯(cuò)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問題的方法
本文主要介紹了Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問題的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了vue中使用/deep/失效的解決辦法,使用了css預(yù)處理器，則可以使用/deep/， 如果/deep/ 無效，則使用 ::v-deep，本文給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue組件中實(shí)現(xiàn)嵌套子組件案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue使用swiper插件實(shí)現(xiàn)垂直輪播圖
這篇文章主要介紹了vue使用swiper插件實(shí)現(xiàn)垂直輪播圖，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue.js是現(xiàn)在比較優(yōu)秀的Web前端框架,非常推薦大家入門學(xué)習(xí),這篇文章主要給大家介紹了關(guān)于如何一步步從零搭建一個(gè)Vue項(xiàng)目的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05