What does @input="$emit('input', $event)" means in vue component?

Question

I am reading some code that I want to update:

<b-input :value="value" @input="$emit('input', $event)" ref="input" :maxlength="maxlength"/>

what does @input="$emit('input', $event)" stand for? Where and how can I listen for the input event?

Answer 1

@input is the short-hand for v-on:input which binds to the component's input event. vm.$emit is documented here and has an example with a similar use-case here.

In your case your component simply emits an event with the same name and the same arguments as the one it receives from its child b-input. Programatically you can listen to these events with vm.$on, e.g. in your mounted method:

export default {
  components: { BInput },

  mounted () {
    this.$on('input', (event) => {
      console.log(event);
    });
  }
}

Answer 2

$emit is data passed to an other component, see this example:

Component: getEmit.vue

<template>
  <!--get data-->
  <button-emit v-on:data="getValue"></button-emit>
</template>
<script>
  import buttonEmit from './buttonEmit'
  export default {
    name: 'getEmit',
    components: { buttonEmit },
    methods: {
      // get payload in parameter
      getValue(event) {
        alert('Get Emit Success' + event)
      }
    }
  }
</script>

Component: buttonEmit.vue

<template>
  <button @click="emit($event)"></button>
</template>
<script>
  export default {
    name: 'buttonEmit',
    methods: {
      emit(event) {
      // Emit text data the payload event
        this.$emit('data', event)
      }
    }
  }
</script>