//Componente padre
<template> <childComp @onchangeData='changeData' /> </template> <script> setup() { const state = reactive({ data: 'anything }); function changeData(v){ state.data = v } return { changeData} }, </script>//Niño
<template> <button @click='change('hello')' /> </template> <script> setup() { function change(v){ this.$emit('onchangeData', v) } return{change} }, </script> Estoy luchando por cambiar el estado reactivo de los padres al hacer clic en el botón del niño. Está diciendo esto. $ emit no es una función . Intenté muchas formas, como usar @onchangeData='changeData()' en lugar de @onchangeData='changeData' , usar funciones de flecha, etc. Pero nada funciona. Aquí, escribí un ejemplo y un código mínimo para mantenerlo simple. Pero espero que mi problema sea claro.
Mire el siguiente fragmento, this es lo mismo en la composición que en la API de opciones, por lo que debe usar la función emit pass to setup:
const { reactive } = Vue const app = Vue.createApp({ setup() { const state = reactive({ data: 'anything' }); function changeData(v){ state.data = v } return { changeData, state } }, }) app.component("ChildComp", { template: ` <div> <button @click="change('hello')">click</button> </div> `, setup(props, {emit}) { function change(v){ emit('onchangeData', v) } return { change } }, }) app.mount('#demo') <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <child-comp @onchange-data='changeData'></child-comp> <p>{{ state.data }}</p> </div>