• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

116
Views
Transferencia de datos de un componente secundario al componente principal a un componente secundario diferente en Vue sin vuex

así que soy nuevo en Vue y estoy tratando de pasar texto de un componente secundario (InputComp) a su elemento principal y luego reflejar nuevamente el cambio en un componente secundario diferente (ReflectiveComp).

 Home / \ / \ / \ inputComp ReflectiveComp

Entonces, en la plantilla de inputComp, estoy usando la siguiente entrada para obtener los datos:

y en la sección de secuencias de comandos de inputComp, agregué un observador para escuchar los cambios:

 export default defineComponent({ name: 'inputComp, ', data(){ return{ inputText: '' } }, watch:{ inputText: function(val, oldVal){ this.$emit('change-input',val); } } });

En el componente principal (Inicio), resaltar es la variable que quiero pasar al componente ReflectiveComp:

 <template> <inputComp @change-input="onChange"/> <ReflectiveComp :highlight="highlight"/> </template> <script> export default defineComponent({ components: { Countries, HighlightFilter }, data(){ return{ highlight: 0 } }, methods:{ onChange(val){ this.highlight = val; } } }); </script>

y en el ReflectiveComp:

 <template> <label>{{highlight}}</label> </template> <script> import { defineComponent } from 'vue' export default defineComponent({ name: 'ReflectiveComp', props:{ highlight: Number }, </script>

Según los resultados que he estado obteniendo, parece que: el método onChange dentro del componente principal (Inicio) se activa y actualiza cada vez que cambiamos la entrada en el componente inputComp.

El problema: la variable de resaltado no cambia en ReflictiveComp.

¿¿Qué estoy haciendo mal??

almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error