//Main component
<template>
<childComponent @onChangeData='updateData' />
</template>
<script>
setup() {
const state = reactive({
data: 'example'
});
function updateData(newValue){
state.data = newValue
}
return { updateData}
},
</script>
//Child Component
<template>
<button @click='triggerChange("world")' />
</template>
<script>
setup() {
function triggerChange(input){
this.$emit('onChangeData', input)
}
return{triggerChange}
},
</script>
I am facing difficulty in updating the parent's reactive state from a button click event in the child component. An error message "this.$emit is not a function" keeps showing up. I have tried various alternatives such as using @onChangeData='updateData()' instead of @onChangeData='updateData', utilizing arrow functions, and more, but to no avail. The provided code snippet reflects my situation succinctly. Hopefully, my issue is clear now.