Using events for child-parent communication
We have already seen that props are used to pass data from a parent component to a child component. To pass data from a child component back to a parent component, Vue offers custom events.
In a component, we can emit an event using the $emit method; with this.$emit('eventName', payload) within <script>; or just with $emit within the template section.
Assuming we have got a reactive instance property, this.message, we could emit a send event with the message value in the script section using this.$emit. This could be the basis for a MessageEditor component:
<script>
export default {
data () {
return {
message: null
}
},
methods: {
send() {
...