vue3 で dom またはコンポーネントへの ref バインディングが失敗する理由とその解決方法は何ですか?

vue3 ref バインディング dom またはコンポーネントの障害分析

シナリオの説明

vue3 ref でよく使用されます。コンポーネントまたは dom 要素をバインドするとき、多くの場合、関連するコンポーネントをバインドするために ref バインディングが明確に使用されますが、ref バインディングは失敗することがよくあります。

参照バインディングの失敗の例

参照バインディングが失敗するほとんどのケースは、参照がコンポーネントにバインドされるときに、コンポーネントがまだレンダリングされていないため、バインディングが失敗することです。

または、コンポーネントは最初にレンダリングされず、参照はバインドされていません。コンポーネントがレンダリングを開始すると、参照もバインドされ始めますが、参照とコンポーネントのバインドは完了していません。今回は、コンポーネント関連のメソッドを使用するときに問題が発生します。

• ref にバインドされたコンポーネントが v-if を使用するか、その親コン​​ポーネントが v-if を使用すると、ページのレンダリングが開始されます。現時点では、これらのコンポーネントはレンダリングされないため、バインドは失敗します。

• element-plus には、多数の dialog ポップアップ ウィンドウやその他のコンポーネントがあります。これらのコンポーネントは、最初は非表示になっており、必要なときにのみ表示されます。ユーザーがボタンをクリックすると、表示されるため、ユーザーがボタンをクリックすると ref がコンポーネントにバインドされ始めることが多くなります。この時点では、バインドは完了していません。ref 変数を通じてコン​​ポーネント メソッドを使用すると、Uncaught TypeError : null のプロパティを読み取れません (「setCheckedNodes」を読み取っています) エラーが表示されます。

解決策

nextTick を使用してください。 vue3 の メソッド、let 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>

• 参照

<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 またはコンポーネントへの ref バインディングが失敗する理由とその解決方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。