Comment obtenir des nœuds en vue

Méthodes pour obtenir des nœuds dans Vue : Accédez directement aux nœuds DOM : Utilisez $el pour accéder à l'élément racine du composant. Utilisez $refs : Pour accéder aux éléments enfants ou aux éléments racine du composant, vous devez utiliser ref pour spécifier le nom. Utilisez la fonction de rendu : créez l'élément dans la fonction de rendu et accédez au nœud DOM via vm.$vnode. À l'aide de bibliothèques tierces : telles que Vuetify et Element UI, les nœuds DOM sont accessibles respectivement via $el et $refs.

Comment obtenir des nœuds dans Vue ?

Accès direct aux nœuds DOM

• $el : Accédez à l'élément racine du composant. $el: 访问组件根元素。
• $refs: 访问组件的子元素或根元素，需要在模板中使用 ref 属性指定名称。

使用渲染函数

• 在 render 函数中，使用 createElement 函数创建元素，并将其作为 v-node 返回。
• 然后可以通过 vm.$vnode 访问 v-node，进而获取 DOM 节点。

使用第三方的库

• Vuetify: 提供 $el 属性，可以通过 this.$el 访问 DOM 节点。
• Element UI: 提供 $refs 属性，可以通过 this.$refs
$refs : Pour accéder aux éléments enfants ou aux éléments racine du composant, vous devez spécifier le nom à l'aide de l'attribut ref dans le modèle.

Utilisez la fonction de rendu

• Dans la fonction render, utilisez la fonction createElement pour créer l'élément et transmettez-le en tant que v-node retour. <strong></strong>Ensuite, vous pouvez accéder à <code>v-node via vm.$vnode pour obtenir le nœud DOM.

• Utiliser des bibliothèques tierces

Vuetify : fournit l'attribut $el, qui peut accéder aux nœuds DOM via this.$el.

• Element UI : fournit l'attribut $refs, qui peut accéder aux nœuds DOM via this.$refs.

Exemple :

🎜🎜🎜🎜🎜Accès direct aux nœuds DOM : 🎜🎜

<template>
<div id="app">Hello</div>
</template>

<script>
export default {
mounted() {
  console.log(this.$el); // 获取 DOM 节点 <div id="app">
}
}
</script>

🎜🎜🎜🎜Utiliser la fonction de rendu : 🎜🎜

<template>
<div>Hello</div>
</template>

<script>
export default {
render(h) {
  return h('div', 'Hello');
},
mounted() {
  console.log(this.$vnode.elm); // 获取 DOM 节点 <div>
}
}
</script>

🎜🎜🎜🎜Utiliser une bibliothèque tierce : 🎜🎜

<template>
<v-btn ref="button" @click="handleClick">Button</v-btn>
</template>

<script>
import { Button } from 'vuetify';

export default {
components: { Button },
methods: {
  handleClick() {
    console.log(this.$refs.button); // 获取 DOM 节点 <button>
  }
}
}
</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!