Comment obtenir des éléments dom en vue

Dans Vue, les méthodes pour obtenir des éléments DOM incluent : 1. Utilisez $refs pour accéder aux éléments avec des attributs ref ; 2. Utilisez le modificateur # dans le modèle pour lier directement les éléments à $refs ; 3. Accédez au $ des sous-composants el. attribut ; 4. Utilisez le panneau "Composants" de Vue Devtools.

Méthodes pour obtenir des éléments DOM dans Vue

Dans Vue, vous pouvez obtenir des éléments DOM via les méthodes suivantes :

1. $refs

$refs An. L'attribut est un objet qui contient des références à tous les éléments du modèle qui ont l'attribut ref. Utilisez $refs pour accéder directement aux éléments DOM, comme indiqué ci-dessous : $refs 属性是一个对象，它包含了模板中所有带有 ref 属性的元素的引用。使用 $refs 可以直接访问 DOM 元素，如下所示：

<code class="vue"><template>
  <div ref="myElement"></div>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$refs.myElement); // 输出 DOM 元素
    }
  }
</script></code>

2. 模板中使用 # 修饰符**

# 修饰符可以将模板中的元素直接绑定到组件实例的 $refs 对象中，如下所示：

<code class="vue"><template>
  <div #myElement></div>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$refs.myElement); // 输出 DOM 元素
    }
  }
</script></code>

3. 访问子组件的根 DOM 元素

可以使用 $children 访问子组件，然后可以通过 $el

<code class="vue"><template>
  <ChildComponent ref="child"></ChildComponent>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$refs.child.$el); // 输出子组件的根 DOM 元素
    }
  }
</script></code>

2 Utilisez #

modifier**

# dans le modèle. Le modificateur peut lier des éléments du modèle directement à l'objet $refs de l'instance du composant, comme indiqué ci-dessous :

rrreee
• 3 Accédez à l'élément DOM racine du composant enfant
• .
• Vous pouvez utiliser $children pour accéder au composant enfant, puis vous pouvez obtenir l'élément DOM racine du composant enfant via l'attribut $el, comme indiqué ci-dessous :
rrreee
• 4. Utiliser Vue Devtools

🎜🎜Vue Devtools est une extension de navigateur qui peut être utilisée pour inspecter les applications Vue. Dans Devtools, vous pouvez accéder directement aux éléments du DOM via le panneau "Composants", comme indiqué ci-dessous : 🎜🎜🎜 Ouvrez Vue Devtools 🎜🎜 Sélectionnez le panneau "Composants" 🎜🎜 Recherchez le composant que vous souhaitez afficher 🎜🎜 Dans le "DOM" section du composant, c'est-à-dire que vous pouvez afficher les éléments DOM de ce composant🎜🎜

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!