es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • En Vue.js, ¿cómo puedo seleccionar el elemento de nodo de un componente? ¿Es posible utilizar `$refs`?

En Vue.js, ¿cómo puedo seleccionar el elemento de nodo de un componente? ¿Es posible utilizar `$refs`?

22 Jul, 2023 Programación

Porque quiero seleccionar el elemento de nodo de un componente, creo que puedo usar $refs.

Padre

<template>
    <my-component ref="myComponentElement"></my-component>
</template>

import MyComponent from "./MyComponent.vue";

components:{
     MyComponent
},
    mounted() {
    const theElement = this.$refs.myComponentElement;
    …
},

Hijo

<template>
   <div>
     <div>test</div>
   </div>
</template>

Agrego “ref” a la etiqueta del componente y uso “this.$refs.myComponentElement” para obtener el elemento. Pero no obtiene un elemento de nodo, en cambio, devuelve un objeto proxy.

Entonces, ¿cómo puedo seleccionar el elemento de nodo de un componente personalizado? ¿Puedo usar $refs? Gracias~

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, puedes usar $refs para seleccionar el elemento de nodo de un componente personalizado. Sin embargo, cuando utilizas $refs para acceder al elemento, devuelve un objeto proxy en lugar del elemento DOM real. Para acceder al elemento DOM real, puedes utilizar la propiedad $el.

    Aquí tienes un ejemplo actualizado de cómo puedes acceder al elemento de nodo del componente personalizado:

    Padre:

    <template>
  <my-component ref="myComponentElement"></my-component>
</template>

<script>
import MyComponent from "./MyComponent.vue";

export default {
  components:{
    MyComponent
  },
  mounted() {
    const theElement = this.$refs.myComponentElement.$el;
    ...
  },
};
</script>

    Hijo:

    <template>
  <div>
    <div>test</div>
  </div>
</template>

    En este ejemplo, estamos accediendo a la propiedad $el del objeto proxy devuelto por $refs para obtener el elemento DOM real del componente personalizado.

Comments are closed.