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??