您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“vue3中ref綁定dom或組件失敗如何解決”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“vue3中ref綁定dom或組件失敗如何解決”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
在vue3中經(jīng)常用到使用ref
綁定組件或者dom元素的情況,很多時(shí)候,明明使用ref綁定了相關(guān)組件,但是經(jīng)常ref綁定失敗的情況。
ref綁定失敗的絕大多數(shù)情況是,在ref和組件綁定的時(shí)候,該組件還未渲染,所以綁定失敗。
或者組件剛開(kāi)始未渲染,ref未綁定,當(dāng)組件開(kāi)始渲染,ref也開(kāi)始綁定,但是ref和組件并未綁定完成,這個(gè)時(shí)候使用組件相關(guān)的方法就會(huì)出現(xiàn)問(wèn)題。
ref綁定的組件使用了v-if
,或者他的父組件使用了v-if
導(dǎo)致頁(yè)面開(kāi)始渲染的時(shí)候,這些組件并沒(méi)有渲染,所以綁定失敗。
在element-plus
中有很多 dialog
彈窗等組件,這些組件開(kāi)始是隱藏的,只有用戶點(diǎn)擊了按鈕才展示,所以很多時(shí)候是在用戶點(diǎn)擊按鈕的時(shí)候,ref才開(kāi)始和組件綁定,這個(gè)時(shí)候綁定還未完成,我們通過(guò)ref的變量使用組件的方法,就會(huì)出現(xiàn)Uncaught TypeError: Cannot read properties of null (reading 'setCheckedNodes')的錯(cuò)誤
使用vue3的nextTick
方法,讓調(diào)用ref組件方法的邏輯放到下一個(gè)時(shí)間片執(zhí)行即可。(推薦)
function addFilterPropertyRule(row) { let ruleParamObj = JSON.parse(row.hardwareParam) if (ruleParamObj) { makePropertityTree(ruleParamObj, treeData) } addOrEditRuleVisible.value = true currentRuleItem = row if (row.ruleJson) { nextTick(() => { treeRef.value.setCheckedNodes(JSON.parse(row.ruleJson), false) }) } }
使用一個(gè)延時(shí)定時(shí)器,讓調(diào)用ref組件方法的邏輯等一會(huì)再執(zhí)行。(不推薦)
組合式 API 模板引用在 v-for 內(nèi)部使用時(shí)沒(méi)有特殊處理。需要綁定函數(shù)自定義處理。
<template> <div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }"> {{ item }} </div> </template> <script> import { ref, reactive, onBeforeUpdate } from 'vue' export default { setup() { const list = reactive([1, 2, 3]) const divs = ref([]) // 確保在每次更新之前重置ref onBeforeUpdate(() => { divs.value = [] }) return { list, divs } } } </script>
Ref
<template> <div ref="root">This is a root element</div> </template> <script> import { ref, onMounted } from 'vue' export default { setup() { const root = ref(null) onMounted(() => { // DOM 元素將在初始渲染后分配給 ref console.log(root.value) // <div>This is a root element</div> }) return { root } } } </script>
讀到這里,這篇“vue3中ref綁定dom或組件失敗如何解決”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。