I need to send the input data from a child component to the parent component's data property by using the $emit method. Directly binding the transmitted property to the child property using v-bind within the
<input v-model="userinput" />runtime-core.esm-bundler.js?5c40:6870 [Vue warn]: Extraneous non-emits event listeners (transmitData) were passed to the component but could not be automatically inherited because the component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.
at <UserInput onTransmitData=fn<bound receaveData> >
at <App>
What is the correct approach for handling this type of operation?
\\ Child Component
<template>
<input v-model="userinput" />
<button type="button" @click="transmitData">transmit</button>
</template>
<script>
export default {
data() {
return {
userinput: " dd",
}
},
methods: {
transmitData(event){
this.$emit('transmit-data', this.userinput)
}
}
}
</script>
\\ Parent Component
<template>
<user-input @transmit-data="receaveData" />
<p>{{ childData }}</p>
</template>
<script>
import UserInput from "./components/UserInput.vue";
export default {
name: "App",
components: {
UserInput,
},
data() {
return {
childData: " "
};
},
methods: {
receiveData(compTransmit){
console.log(compTransmit)
this.childData = compTransmit
},
},
};
</script>