Apakah sebab mengapa ref mengikat dom atau komponen gagal dalam vue3 dan cara menyelesaikannya

Vue3 ref binding dom atau analisis kegagalan komponen

Penerangan senario

Menggunakan ref binding sering digunakan dalam vue3 Dalam kes ini komponen tertentu atau elemen DOM, dalam banyak kes, komponen yang berkaitan diikat dengan jelas menggunakan ref, tetapi pengikatan ref sering gagal.

Contoh kegagalan pengikatan ref

Sebilangan besar kes di mana pengikatan ref gagal ialah apabila ref diikat pada komponen, komponen itu belum lagi dipaparkan, jadi pengikatan gagal.

Atau komponen tidak dipaparkan pada permulaan dan ref tidak terikat Apabila komponen mula membuat, ref juga mula terikat, tetapi pengikatan antara ref dan komponen tidak selesai masa, masalah akan berlaku apabila menggunakan kaedah berkaitan komponen. Komponen yang diikat oleh

• ref menggunakan v-if, atau komponen induknya menggunakan v-if Akibatnya, apabila halaman mula dipaparkan, komponen ini tidak dipaparkan, jadi pengikatan gagal.

• Terdapat banyak element-plus tetingkap timbul dan komponen lain dalam dialog Komponen ini disembunyikan pada mulanya dan hanya dipaparkan apabila pengguna mengklik butang, berkali-kali ia dipaparkan apabila pengguna mengklik butang , ref mula terikat pada komponen Pada masa ini, pengikatan tidak selesai Apabila kita menggunakan kaedah komponen melalui pembolehubah ref, ralat Uncaught TypeError: Tidak boleh membaca sifat null (membaca 'setCheckedNodes') akan muncul

Penyelesaian

Gunakan kaedah nextTick vue3 untuk membiarkan logik memanggil kaedah komponen ref dilaksanakan dalam kepingan masa seterusnya. (Disyorkan)

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

Gunakan pemasa tunda untuk membiarkan logik memanggil kaedah komponen ref menunggu seketika sebelum melaksanakan. (Tidak disyorkan)

Vue3 gabungan API v-for dan ref mengikat DOM

Tiada layanan istimewa untuk gabungan rujukan templat API apabila digunakan secara dalaman oleh v-for. Pemprosesan tersuai fungsi mengikat diperlukan.

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

Atas ialah kandungan terperinci Apakah sebab mengapa ref mengikat dom atau komponen gagal dalam vue3 dan cara menyelesaikannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!