Welche Möglichkeiten gibt es, DOM-Knoten in Vue3 zu erhalten?

1. Holen Sie sich den DOM-Knoten mit nativem js:

document.querySelector(选择器)
document.getElementById(id选择器)
document.getElementsByClassName(class选择器)
....

2. Holen Sie sich das Instanzobjekt der aktuellen Komponente in vue2:

Weil jede Vue-Komponenteninstanz ein $refs-Objekt enthält, das das entsprechende DOM speichert Ein Verweis auf ein Element oder eine Komponente. Daher verweisen die $refs der Komponente standardmäßig auf ein leeres Objekt. Sie können zuerst

ref="name"

zur Komponente hinzufügen und dann das entsprechende Element über this.$refs.name abrufen und bedienen.

<template>
  <div class="box">
    <h2 ref="divDom">这是一个测试样例</h2>
    <button ref="but">按钮</button>
  </div>
</template>
 
<script>
 
export default {
  data() {
    return {
    }
  },
  methods: {
    showThis(){
      // h2的实例对象 
      console.log(this);
      this.$refs.divDom.style.color=&#39;yellow&#39;
      //引用到组件的实例之后，也可以调用组件上的 methods方法
      this.$refs.but.click();
    },
  },
}
</script>

3. Rufen Sie das Instanzobjekt der aktuellen Komponente in vue3 ab:

Dieses Objekt ist im Vue3-Framework deaktiviert, daher können Sie this.$refs nicht verwenden, um den DOM-Knoten der benutzerdefinierten Komponentenreferenz abzurufen.

Aber vue3 verfügt über eine Funktion, die das aktuelle Komponenteninstanzobjekt zurückgeben kann:

getCurrentInstance

Durch das Abrufen des Objekts über diese Funktion kann Energie gespart und sichergestellt werden, dass das Objekt Referenzen in der Schnittstelle enthält.

<template>
    <div ref="divDom"></div>
</template>
 
<script setup>
    import { ref, getCurrentInstance } from &#39;vue&#39;;
    
    const divDom = ref(null);
    onMounted(()=>{
        console.log(&#39;获取dom元素&#39;,divDom)
    })
 
    // 获取页面的实例对象
    const pageInstance = getCurrentInstance();
    // 获取dom节点对象
    const tagDomObj = pageInstance.refs.divDom;
 
</script>

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, DOM-Knoten in Vue3 zu erhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!