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() {
      ...