@input="$emit('input', $event)" 在 vue 组件中是什么意思？答案

【问题标题】：What does @input="$emit('input', $event)" means in vue component?@input="$emit('input', $event)" 在 vue 组件中是什么意思？
【发布时间】：2018-11-08 13:45:39
【问题描述】：

我正在阅读一些我想更新的代码：

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

@input="$emit('input', $event)" 代表什么？在哪里以及如何监听输入事件？

【问题讨论】：

标签： vue.js vue-events

【解决方案1】：

@input 是v-on:input 的简写，它绑定到组件的input 事件。 vm.$emit 记录在 here 中，并有一个类似用例 here 的示例。

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

export default {
  components: { BInput },

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

【讨论】：

【解决方案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>

【讨论】：