Что означает @input="$emit('input', $event)" в компоненте vue?

Question

Я читаю код, который хочу обновить,

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

что означает @input="$emit('input', $event)"? Где и как я могу прослушать входное событие?

Answer 1

@input это сокращение для v-on:input который связывается с компонентом input событие. vm.$emit здесь задокументировано и здесь есть пример с похожим вариантом использования.

В вашем случае ваш компонент просто генерирует событие с тем же именем и теми же аргументами, что и тот, который он получает от своего дочернего элемента. b-input, Программно вы можете слушать эти события с vm.$on например, в вашем mounted метод:

export default {
  components: { BInput },

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

Answer 2

$emit - это данные, передаваемые другому компоненту, это пример.

  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>