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

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

0 голосов
/ 08 ноября 2018

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

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

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

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

$ 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>
0 голосов
/ 08 ноября 2018

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

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

export default {
  components: { BInput },

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