Der Unterschied zwischen dem Abrufen von Tags per Ref in Vue3 und Vue2

Verwendung von ref in Vue2

<h3 ref="myRefs">
<script>
	export default {
      
      
		mounted(){
      
      
			this.$refs.myRefs.xxxxxx
		}
	}
</script>

Verwenden von ref in Vue3

ref Get-Element: Verwenden Sie die Ref-Funktion, um das Label-Element in der Komponente abzurufen.
Funktionsanforderungen: Lassen Sie das Eingabefeld automatisch den Fokus erhalten,
da das Dom-Tag beim Aufrufen von Setup nicht gerendert wird. Daher müssen Sie beim Definieren die Null-Option beibehalten

<template>
  <h2>App</h2>
  <input type="text">---
  <input type="text" ref="inputRef">
</template>

<script lang="ts">
import {
      
       onMounted, ref } from 'vue'

export default {
      
      
  setup() {
      
      
    const inputRef = ref<HTMLElement|null>(null)

    onMounted(() => {
      
      
      inputRef.value && inputRef.value.focus()
    })

    return {
      
      
      inputRef
    }
  },
}
</script>

おすすめ

転載: blog.csdn.net/weixin_44684357/article/details/132439800