Was ist der Grund, warum die Ref-Bindung an DOM oder Komponente fehlschlägt, und wie lässt sich das Problem lösen?

vue3 Ref-Bindungsdom- oder Komponentenfehleranalyse

Szenenbeschreibung

in vue3 Es ist Wird häufig verwendet, um ref zum Binden von Komponenten oder Dom-Elementen zu verwenden. Oft wird ref eindeutig zum Binden verwandter Komponenten verwendet, aber die Ref-Bindung schlägt häufig fehl. 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的nextTickBeispiele für Ref-Bindungsfehler

Die überwiegende Mehrheit der Fälle, in denen die Ref-Bindung fehlschlägt, liegt daran, dass die Komponente noch nicht gerendert wurde, wenn der Ref an die Komponente gebunden ist Die Bindung ist definitiv fehlgeschlagen.

Oder die Komponente wird am Anfang nicht gerendert und die Referenz ist nicht gebunden. Wenn die Komponente mit dem Rendern beginnt, wird auch die Referenz gebunden, aber die Referenz und die Komponente sind nicht gebunden Dieses Mal ist bei Verwendung der komponentenbezogenen Methoden ein Fehler aufgetreten.

Die durch ref gebundene Komponente verwendet v-if, oder ihre übergeordnete Komponente verwendet v-ifWenn die Wenn die Seite mit dem Rendern beginnt, werden diese Komponenten nicht gerendert, sodass die Bindung fehlschlägt.

• Es gibt viele Dialogfenster in element-plus. Diese Komponenten sind ausgeblendet Zuerst wird es nur angezeigt, wenn der Benutzer auf die Schaltfläche klickt. Wenn der Benutzer auf die Schaltfläche klickt, wird die Bindung zu diesem Zeitpunkt noch nicht abgeschlossen Variable, ein nicht erfasster Typfehler: Eigenschaften von Null können nicht gelesen werden (lesen von „setCheckedNodes“). Fehler

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

Nach dem Login kopieren

#🎜🎜#Verwenden Sie einen Verzögerungstimer, damit die Logik des Aufrufs der Ref-Komponentenmethode eine Weile warten kann, bevor sie ausgeführt wird. (Nicht empfohlen) #🎜🎜##🎜🎜#vue3 kombinierte APIs v-for und ref-Bindung DOM#🎜🎜##🎜🎜#Es gibt keine Sonderbehandlung für kombinierte API-Vorlagenreferenzen, wenn sie intern in v-for verwendet werden. Eine benutzerdefinierte Verarbeitung von Bindungsfunktionen ist erforderlich. #🎜🎜#

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

">

Das obige ist der detaillierte Inhalt vonWas ist der Grund, warum die Ref-Bindung an DOM oder Komponente fehlschlägt, und wie lässt sich das Problem lösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!