By default, if a Vue component only has one node in it (i.e. no child nodes), then all events that you attach to it from the parent will fire just like if it were a regular HTML element. But what if you have a child node that has children? In that case, you want to use v-on="$listeners", something that became possible a few months ago.

For example, if you have a component that looks like this:

<template>
  <div v-on="$listeners">
    <button>Hello world</button>
  </div>
</template>

<script>
  export default {
    name: 'helloWorldButton'
  };
</script>

Then you can consume that component like this:

<template>
  <hello-world-button @click="buttonWasClicked" />
</template>

<script>
  import helloWorldButton from './hello-world-button.vue';

  export default {
    name: 'parentComponent',
    components: {
      helloWorldButton
    },
    methods: {
      buttonWasClicked() {
        console.log('button was clicked');
      }
    }
  };
</script>

When the button in that child is clicked, the buttonWasClicked method will be called.