vue.js - @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在此处进行了记录，并在此处提供了一个具有类似用例的示例。

在您的情况下，您的组件只是发出一个与它从其 child 接收到的具有相同名称和相同参数的事件b-input。以编程方式，您可以使用 监听这些事件vm.$on，例如在您的mounted方法中：

export default {
  components: { BInput },

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

Answer 2

$emit是传递给其他组件的数据，请参见此示例：

组件：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>

组件：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>