Comment obtenir l'objet élément dans vue-Questions et réponses frontales-php.cn

Comment obtenir l'objet élément dans vue

PHPz

Libérer： 2023-05-11 09:56:06

original

3142 Les gens l'ont consulté

Dans Vue, nous pouvons avoir besoin d'obtenir l'objet DOM d'un certain élément afin d'effectuer certaines opérations, telles que la modification des styles CSS ou l'ajout d'écouteurs d'événements. Cet article expliquera comment obtenir des objets élément dans Vue.

1. Utilisez l'attribut ref pour obtenir l'objet élément

Vue fournit un attribut spécial ref qui peut être utilisé pour obtenir l'objet élément. Dans le modèle, nous pouvons ajouter un attribut ref à l'élément : ref，可以用来获取元素对象。在模板中，我们可以给元素加上一个ref属性：

<template>
  <div>
    <button ref="myButton" @click="handleClick">Click me</button>
  </div>
</template>

Copier après la connexion

在Vue实例中，我们可以使用$refs属性来访问这个元素对象：

export default {
  methods: {
    handleClick() {
      this.$refs.myButton.style.backgroundColor = 'red';
    }
  }
}

Copier après la connexion

在这个例子中，当用户点击按钮时，我们修改了按钮的背景颜色为红色。通过this.$refs.myButton可以获取按钮的DOM对象，然后对其进行修改。

注意，$refs是一个对象，以ref属性的值作为键，对应的元素对象作为值。

2. 通过事件参数获取元素对象

在Vue的事件处理函数中，事件参数会自动传递给回调函数。这个事件参数包含了当前事件的相关信息，其中包括触发事件的元素对象。

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

Copier après la connexion

export default {
  methods: {
    handleClick(event) {
      event.target.style.backgroundColor = 'red';
    }
  }
}

Copier après la connexion

在这个例子中，我们通过点击事件的参数event获取了触发点击事件的元素对象，然后修改了它的背景颜色。

注意，event.target指向的是当前触发事件的元素对象，而不是定义模板中的元素对象。

3. 使用$el属性获取组件根元素对象

当我们使用Vue组件时，组件本身也是一个类似于元素的对象。组件渲染后的根元素可以通过$el属性来获取。

<template>
  <div>
    <my-component ref="myComponent"></my-component>
  </div>
</template>

Copier après la connexion

import MyComponent from './MyComponent.vue';

export default {
  mounted() {
    const root = this.$refs.myComponent.$el;
    root.style.backgroundColor = 'red';
  },
  components: {
    MyComponent,
  }
}

Copier après la connexion

在这个例子中，我们引入了自定义组件MyComponent，并在Vue实例中使用。通过refs属性获取到这个组件实例的引用，在mounted生命周期函数中使用$el属性获取到了组件渲染后的根元素对象，并对其进行操作。

注意，只有在组件渲染后才能获取到组件根元素对象，所以需要在mounted生命周期函数中进行操作。

总结

在Vue中，获取元素对象有多种方式：

使用ref属性获取元素对象，通过$refs属性访问。
在事件处理函数中，通过事件参数获取触发事件的元素对象。
在Vue组件中，使用$elrrreee

$refs

Dans cet exemple, lorsque l'utilisateur clique sur le bouton, nous changeons la couleur d'arrière-plan du bouton en rouge. Vous pouvez obtenir l'objet DOM du bouton via this.$refs.myButton puis le modifier.

Notez que $refs est un objet, avec la valeur de l'attribut ref comme clé et l'objet élément correspondant comme valeur. #🎜🎜##🎜🎜#2. Obtenez l'objet élément via les paramètres d'événement #🎜🎜##🎜🎜#Dans la fonction de traitement d'événement de Vue, les paramètres d'événement sont automatiquement transmis à la fonction de rappel. Ce paramètre d'événement contient des informations sur l'événement en cours, y compris l'objet élément qui a déclenché l'événement. #🎜🎜#rrreeerrreee#🎜🎜#Dans cet exemple, nous obtenons l'objet élément qui a déclenché l'événement click via le paramètre event de l'événement click, puis modifions sa couleur de fond. #🎜🎜##🎜🎜#Notez que event.target pointe vers l'objet élément qui déclenche actuellement l'événement, et non vers l'objet élément dans le modèle de définition. #🎜🎜##🎜🎜#3. Utilisez l'attribut $el pour obtenir l'objet élément racine du composant #🎜🎜##🎜🎜#Lorsque nous utilisons un composant Vue, le composant lui-même est également un objet similaire à un élément. L'élément racine après le rendu du composant peut être obtenu via l'attribut $el. #🎜🎜#rrreeerrreee#🎜🎜#Dans cet exemple, nous introduisons le composant personnalisé MyComponent et l'utilisons dans l'instance Vue. Obtenez la référence à cette instance de composant via l'attribut refs, utilisez l'attribut $el dans la fonction de cycle de vie montée pour obtenir l'objet élément racine une fois le composant rendu et agissez dessus. #🎜🎜##🎜🎜#Notez que l'objet élément racine du composant ne peut être obtenu qu'après le rendu du composant, il doit donc être utilisé dans la fonction de cycle de vie montée. #🎜🎜##🎜🎜#Summary#🎜🎜##🎜🎜#Dans Vue, il existe de nombreuses façons d'obtenir des objets élément : #🎜🎜#

Utilisez l'attribut ref pour obtenir l'objet Element, accessible via l'attribut $refs. #🎜🎜#
Dans la fonction de traitement d'événement, obtenez l'objet élément qui a déclenché l'événement via les paramètres de l'événement. #🎜🎜#
Dans le composant Vue, utilisez l'attribut $el pour obtenir l'objet élément racine une fois le composant rendu. #🎜🎜##🎜🎜##🎜🎜#Ces méthodes sont très simples et faciles à comprendre et peuvent être sélectionnées en fonction de la situation spécifique. #🎜🎜#

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!