vue3中ref綁定dom或者組件失敗的原因及分析
vue3 ref綁定dom或者組件失敗原因分析
場景描述
在vue3中經(jīng)常用到使用ref
綁定組件或者dom元素的情況,很多時候,明明使用ref綁定了相關(guān)組件,但是經(jīng)常ref綁定失敗的情況。
ref綁定失敗情況舉例
ref綁定失敗的絕大多數(shù)情況是,在ref和組件綁定的時候,該組件還未渲染,所以綁定失敗。
或者組件剛開始未渲染,ref未綁定,當(dāng)組件開始渲染,ref也開始綁定,但是ref和組件并未綁定完成,這個時候使用組件相關(guān)的方法就會出現(xiàn)問題。
- ref綁定的組件使用了
v-if
,或者他的父組件使用了v-if
導(dǎo)致頁面開始渲染的時候,這些組件并沒有渲染,所以綁定失敗。 - 在
element-plus
中有很多dialog
彈窗等組件,這些組件開始是隱藏的,只有用戶點(diǎn)擊了按鈕才展示,所以很多時候是在用戶點(diǎn)擊按鈕的時候,ref才開始和組件綁定,這個時候綁定還未完成,我們通過ref的變量使用組件的方法,就會出現(xiàn)Uncaught TypeError: Cannot read properties of null (reading 'setCheckedNodes')的錯誤
解決方案
使用vue3的nextTick
方法,讓調(diào)用ref組件方法的邏輯放到下一個時間片執(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) }) } }
使用一個延時定時器,讓調(diào)用ref組件方法的邏輯等一會再執(zhí)行。(不推薦)
vue3組合式API的v-for及ref綁定DOM
組合式 API 模板引用在 v-for 內(nè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é)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決vue中axios設(shè)置超時(超過5分鐘)沒反應(yīng)的問題
這篇文章主要介紹了解決vue中axios設(shè)置超時(超過5分鐘)沒反應(yīng)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue translate peoject實(shí)現(xiàn)在線翻譯功能【新手必看】
這篇文章主要介紹了vue translate peoject實(shí)現(xiàn)在線翻譯功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06Vue實(shí)現(xiàn)表格中對數(shù)據(jù)進(jìn)行轉(zhuǎn)換、處理的方法
這篇文章主要介紹了Vue實(shí)現(xiàn)表格中對數(shù)據(jù)進(jìn)行轉(zhuǎn)換、處理的方法,需要的朋友可以參考下2018-09-09vue-calendar-component日歷組件報錯Clock is not defi
這篇文章主要為大家介紹了vue-calendar-component日歷組件報錯Clock is not defined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11karma+webpack搭建vue單元測試環(huán)境的方法示例
本篇文章主要介紹了karma+webpack搭建vue單元測試環(huán)境的方法示例,這次搭建的測試環(huán)境和開發(fā)環(huán)境隔離,所以理論上適用所有使用vue的開發(fā)環(huán)境。感興趣的小伙伴們可以參考一下2018-05-05詳解在vue-cli項目下簡單使用mockjs模擬數(shù)據(jù)
這篇文章主要介紹了詳解在vue-cli項目下簡單使用mockjs模擬數(shù)據(jù),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10