vue3中ref綁定dom或者組件失敗的原因及分析
vue3 ref綁定dom或者組件失敗原因分析
場(chǎng)景描述
在vue3中經(jīng)常用到使用ref
綁定組件或者dom元素的情況,很多時(shí)候,明明使用ref綁定了相關(guān)組件,但是經(jīng)常ref綁定失敗的情況。
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í)行。(不推薦)
vue3組合式API的v-for及ref綁定DOM
組合式 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>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決vue中axios設(shè)置超時(shí)(超過(guò)5分鐘)沒(méi)反應(yīng)的問(wèn)題
這篇文章主要介紹了解決vue中axios設(shè)置超時(shí)(超過(guò)5分鐘)沒(méi)反應(yīng)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09vue translate peoject實(shí)現(xiàn)在線翻譯功能【新手必看】
這篇文章主要介紹了vue translate peoject實(shí)現(xiàn)在線翻譯功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06Vue實(shí)現(xiàn)表格中對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換、處理的方法
這篇文章主要介紹了Vue實(shí)現(xiàn)表格中對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換、處理的方法,需要的朋友可以參考下2018-09-09vue-calendar-component日歷組件報(bào)錯(cuò)Clock is not defi
這篇文章主要為大家介紹了vue-calendar-component日歷組件報(bào)錯(cuò)Clock is not defined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11vue項(xiàng)目初始化到登錄login頁(yè)面的示例
今天小編就為大家分享一篇vue項(xiàng)目初始化到登錄login頁(yè)面的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例
本篇文章主要介紹了karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例,這次搭建的測(cè)試環(huán)境和開(kāi)發(fā)環(huán)境隔離,所以理論上適用所有使用vue的開(kāi)發(fā)環(huán)境。感興趣的小伙伴們可以參考一下2018-05-05vue和webpack打包項(xiàng)目相對(duì)路徑修改的方法
這篇文章主要介紹了vue和webpack打包項(xiàng)目相對(duì)路徑修改的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06詳解在vue-cli項(xiàng)目下簡(jiǎn)單使用mockjs模擬數(shù)據(jù)
這篇文章主要介紹了詳解在vue-cli項(xiàng)目下簡(jiǎn)單使用mockjs模擬數(shù)據(jù),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10