@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是绑定到组件的input事件的v-on:input的短手。这里记录了vm.$emit，并且这里有一个具有类似用例的示例。

在您的情况下，您的组件只是发出一个事件，该事件的名称和参数与其从其子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>

组件：按钮发射.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>