Quels sont les moyens d'obtenir des nœuds DOM dans Vue3

1. Obtenez le nœud DOM à partir de js natif :

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

2. Obtenez l'objet instance du composant actuel dans vue2 :

Parce que chaque instance de composant vue contient un objet $refs, qui stocke le DOM correspondant. Une référence à un élément ou un composant. Ainsi, par défaut, le $refs du composant pointe vers un objet vide.

Vous pouvez d'abord ajouter ref="name" au composant, puis obtenir l'élément correspondant via this.$refs.name et l'utiliser.

<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. Récupérez l'objet instance du composant actuel dans vue3 :

Cet objet est désactivé dans le framework Vue3, vous ne pouvez donc pas utiliser this.$refs pour obtenir le nœud DOM de la référence du composant personnalisé.

Mais vue3 est livré avec une fonction qui peut renvoyer l'objet d'instance de composant actuel getCurrentInstance L'obtention de l'objet via cette fonction peut économiser de l'énergie et voir que l'objet contient des références dans l'interface.

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

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!