Vue.js 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.js has custom events.
In a component, an event can be emitted using the $emit instance method. It can be used from within the script section using this.$emit('eventName', /* payload */), but it is also exposed within the template section as $emit.
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: {...
