Quelle est la raison pour laquelle la liaison ref à dom ou composant échoue dans vue3 et comment la résoudre

vue3 ref bind dom ou analyse de défaillance d'un composant

Description de la scène

dans vue3 C'est souvent utilisé pour utiliser ref pour lier des composants ou des éléments dom Plusieurs fois, ref est clairement utilisé pour lier des composants associés, mais la liaison ref échoue souvent. 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的nextTickExemples d'échec de liaison de référence

La grande majorité des cas où la liaison de référence échoue est que lorsque la référence est liée au composant, le composant n'a pas encore été rendu, donc la liaison a définitivement échoué.

Ou le composant n'est pas rendu au début et la référence n'est pas liée. Lorsque le composant commence à être rendu, la référence commence également à être liée, mais la référence et le composant ne sont pas liés. cette fois, en utilisant les méthodes liées aux composants, un problème s'est produit.

Le composant lié par ref utilise v-if, ou son composant parent utilise v-ifLorsque le la page commence le rendu, ces composants ne sont pas rendus, donc la liaison échoue.

• Il existe de nombreuses fenêtres contextuelles dialog et d'autres composants dans element-plus. au début. Il n'est affiché que lorsque l'utilisateur clique sur le bouton, donc dans de nombreux cas, la référence commence à être liée au composant lorsque l'utilisateur clique sur le bouton. À ce stade, la liaison n'est pas terminée si nous utilisons le composant. via la variable ref, une erreur Uncaught TypeError se produira : Impossible de lire les propriétés de l'erreur null (lecture de 'setCheckedNodes')

#🎜🎜 ##🎜🎜#Solution#🎜🎜##🎜🎜#Utiliser La méthode nextTick de vue3 permet à la logique d'appel de la méthode du composant ref d'être exécutée dans la tranche de temps suivante. (#🎜🎜#Recommandé#🎜🎜#) #🎜🎜#

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

#🎜🎜#Utilisez un temporisateur pour laisser la logique d'appel de la méthode du composant ref attendre un moment avant de s'exécuter. (Non recommandé) #🎜🎜##🎜🎜#vue3 combine la liaison v-for et ref de l'API DOM#🎜🎜##🎜🎜#Il n'y a pas de traitement spécial pour les références de modèles d'API combinées lorsqu'elles sont utilisées en interne dans v-for. Un traitement personnalisé des fonctions de liaison est requis. #🎜🎜#

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!