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