vue3에서 DOM 또는 컴포넌트에 대한 참조 바인딩이 실패하는 이유는 무엇이며 해결 방법은 무엇입니까?

Vue3 ref 바인딩 DOM 또는 컴포넌트 오류 분석

시나리오 설명

vue3에서는 컴포넌트 또는 dom 요소를 바인딩하기 위해 ref를 사용하는 경우가 많으며 명확하게 사용됩니다. ref는 관련 구성 요소를 바인딩하지만 ref 바인딩은 종종 실패합니다. 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的nextTick참조 바인딩 실패의 예

참조 바인딩이 실패하는 대부분의 경우는 참조가 구성 요소에 바인딩될 때 구성 요소가 아직 렌더링되지 않아 바인딩이 실패하는 것입니다.

또는 처음에 컴포넌트가 렌더링되지 않고 ref가 바인딩되지 않습니다. 컴포넌트가 렌더링되기 시작하면 ref도 바인딩되기 시작하지만 이때 ref와 컴포넌트 간의 바인딩이 완료되지 않는 문제가 있습니다. 구성 요소 관련 메서드를 사용할 때 발생합니다.

ref 바인딩 구성 요소는 v-if를 사용하거나 상위 구성 요소가 v-if를 사용하므로 페이지 렌더링이 시작될 때 이러한 구성 요소가 렌더링되지 않습니다. 이므로 바인딩이 실패합니다.

• element-plus에는 많은 대화 상자 팝업 창과 기타 구성 요소가 있습니다. 이러한 구성 요소는 처음에는 숨겨져 있으며 사용자가 버튼을 클릭할 때만 표시됩니다. 사용자가 버튼을 클릭하면 ref가 컴포넌트에 바인딩되기 시작합니다. 이때 ref 변수를 통해 컴포넌트 메서드를 사용하면 Uncaught TypeError: Cannot read Properties가 발생합니다. null('setCheckedNodes' 읽기)이 나타납니다. Error

🎜🎜Solution🎜🎜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에서 DOM 또는 컴포넌트에 대한 참조 바인딩이 실패하는 이유는 무엇이며 해결 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!