本文小編為大家詳細(xì)介紹“vue3中ref綁定dom或組件失敗如何解決”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue3中ref綁定dom或組件失敗如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

清原網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,清原網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為清原成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的清原做網(wǎng)站的公司定做！

vue3 ref綁定dom或者組件失敗原因分析

場(chǎng)景描述

在vue3中經(jīng)常用到使用ref綁定組件或者dom元素的情況，很多時(shí)候，明明使用ref綁定了相關(guān)組件，但是經(jīng)常ref綁定失敗的情況。

ref綁定失敗情況舉例

ref綁定失敗的絕大多數(shù)情況是，在ref和組件綁定的時(shí)候，該組件還未渲染，所以綁定失敗。

或者組件剛開始未渲染，ref未綁定，當(dāng)組件開始渲染，ref也開始綁定，但是ref和組件并未綁定完成，這個(gè)時(shí)候使用組件相關(guān)的方法就會(huì)出現(xiàn)問題。

• ref綁定的組件使用了v-if,或者他的父組件使用了v-if導(dǎo)致頁(yè)面開始渲染的時(shí)候，這些組件并沒有渲染，所以綁定失敗。

• 在element-plus中有很多 dialog彈窗等組件，這些組件開始是隱藏的，只有用戶點(diǎn)擊了按鈕才展示，所以很多時(shí)候是在用戶點(diǎn)擊按鈕的時(shí)候，ref才開始和組件綁定，這個(gè)時(shí)候綁定還未完成，我們通過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í)沒有特殊處理。需要綁定函數(shù)自定義處理。

• Ref

讀到這里，這篇“vue3中ref綁定dom或組件失敗如何解決”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。