vue3中ref綁定dom或元件失敗的原因為何及怎麼解決-Vue.js-PHP中文網

vue3中ref綁定dom或元件失敗的原因為何及怎麼解決

PHPz

發布： 2023-05-12 13:28:06

轉載

1890 人瀏覽過

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

場景描述

在vue3中常用到使用ref 綁定元件或是dom元素的狀況，很多時候，明明使用ref綁定了相關元件，但是經常ref綁定失敗的情況。

ref綁定失敗情況舉例

ref綁定失敗的絕大多數情況是，在ref和元件綁定的時候，該元件還未渲染，所以綁定失敗。

或元件剛開始未渲染，ref未綁定，當元件開始渲染，ref也開始綁定，但是ref和元件並未綁定完成，這個時候使用元件相關的方法就會出現問題。

ref綁定的元件使用了v-if,或者他的父元件使用了v-if導致頁面開始渲染的時候，這些元件並沒有渲染，所以綁定失敗。
在element-plus中有很多dialog彈窗等元件，這些元件開始是隱藏的，只有使用者點擊了按鈕才展示，所以很多時候是在使用者點擊按鈕的時候，ref才開始和元件綁定，這個時候綁定還未完成，我們透過ref的變數使用元件的方法，就會出現Uncaught TypeError: Cannot read properties of null (reading 'setCheckedNodes')的錯誤

vue3中ref綁定dom或元件失敗的原因為何及怎麼解決

#解決方案

使用vue3的nextTick#方法，讓呼叫ref元件方法的邏輯放到下一個時間片執行即可。（推薦）

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)
        })
    }
}

登入後複製

使用一個延時定時器，讓呼叫ref元件方法的邏輯等一會再執行。（不建議）

vue3組合式API的v-for及ref綁定DOM

組合式 API 範本引用在 v-for 內部使用時沒有特殊處理。需要綁定函數自訂處理。

<template>
  <div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
    {{ item }}
  </div>
</template>
 
<script>
  import { ref, reactive, onBeforeUpdate } from &#39;vue&#39;
 
  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 &#39;vue&#39;
 
  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或元件失敗的原因為何及怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！