Tengo una duda con respecto a si hay una forma en Vue de hacer lo mismo que un accesorio pero a la inversa. Déjame explicarte un poco mejor, por ejemplo, tengo lo siguiente:
const app = Vue.createApp({ data: function() { return { text: "Hola" } }, template: `<div> <child-input v-model:text="text"></child-input> <input v-model="text" /> {{text}} </div>` })Aquí, si defino un accesorio en el componente de entrada infantil con el nombre "texto", tendré exactamente el mismo valor que afuera. Algo como esto:
const childInput = { data() { return { input: '' } }, props : ['text'], template: '<input type="text" v-model="outsideInput">', created() { this.input = this.text } } Y si defino ahora un observador en la variable "texto" para cambiar el valor de la entrada, sí cambia. Pero ahora me gustaría hacer lo contrario, cuando cambia la entrada de childInput (variable "entrada"), para propagar este cambio también a la entrada externa.
Puede emitir un evento desde el niño y actualizar el accesorio:
const app = Vue.createApp({ data: function() { return { text: "Hola" } }, template: `<div> <child-input @text-changed="updateText" v-model:text="text"></child-input> <input v-model="text" /> {{text}} </div>`, methods: { updateText(val) { this.text = val } } }) app.component('childInput', { props : ['text'], template: '<div> child <input type="text" v-model="input"></div>', computed : { input: { get(){ return this.text }, set(newValue) { this.$emit('textChanged', newValue) } } }, }) app.mount("#demo") <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"></div>