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 /
  • Vue2 usa $ref para cargar datos desde un componente hijo y ponerlos en los datos del componente padre.

Vue2 usa $ref para cargar datos desde un componente hijo y ponerlos en los datos del componente padre.

19 Jul, 2023 Programación

En Vue2 estoy tratando de acceder a los datos de los componentes hijos y luego colocarlos en los datos del componente padre sin activar un evento. En el siguiente ejemplo, quiero guardar count:20 en el componente padre, por favor avíseme si hay algún error, ¡gracias!

Componente Hijo

<template>
  <div></div>
</template> 
<script>
export default {
  data() {
    return {
      count: 20,
    };
  },
};
</script>

<code>
<strong>Componente Padre</strong>
</code>
<template>
  <div>
    <child ref="child1"></child>
    {{count}}
</div>
</template> 

<script> 
import child from './child.vue' 
export default { 
  components: {
    child
  }, 
  data() {
    return{
      count: this.$refs.child1.count
    }
  },
} 
</script>

Mensaje de advertencia en VScode
Property ‘count’ does not exist on type ‘Vue | Element | Vue[] | Element[]’.
Property ‘count’ does not exist on type ‘Vue’.

Mensaje de advertencia en el navegador
[Vue warn]: Error in data(): “TypeError: undefined is not an object (evaluating ‘this.$refs.child1’)”

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para acceder a los datos de los componentes hijos y colocarlos en los datos del componente padre sin activar un evento en Vue2, puedes utilizar la propiedad $children del componente padre para acceder al componente hijo y sus datos. Aquí tienes un ejemplo de código para guardar count: 20 en los datos del componente padre:

    Componente Hijo

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

<script>
export default {
  data() {
    return {
      count: 20,
    };
  },
};
</script>

    Componente Padre

    <template>
  <div>
    <child ref="child1"></child>
    {{count}}
  </div>
</template> 

<script> 
import child from './child.vue' 

export default {
  components: { child },
  data() {
    return {
      count: null,
    }
  },
  mounted() {
    this.count = this.$children[0].count
  },
}
</script>

    En este ejemplo, utilizamos la propiedad $children para acceder al componente hijo y luego recuperamos los datos count del componente hijo y los guardamos en los datos count del componente padre cuando el componente se monta.

    Ten en cuenta que los mensajes de advertencia en VScode y en el navegador se produjeron porque la propiedad count no se accedió correctamente utilizando this.$refs.child1.count. En su lugar, utilizamos $children para acceder a los datos del componente hijo.

Comments are closed.