欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年04月19日 15:30:07   作者:ITzhongzi  
這篇文章主要介紹了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)文章

最新評論