在自定义输入字段VueJS上使用keyup-enter

Question

我必须在Vue上的自定义输入组件中使用keypu.enter。我希望组件<input />能够在键入
期间的回车键事件之后执行父组件中托管的功能。这是组件代码

<input v-on:keyup.enter="$emit('keyup')"/>

还有主页

<template>
<se-input @keyup="function()"/>
</template>
<script>
import inputField from '../components/inputfield.vue'
export default {
name: 'inputField',
components: {
'custom-input': inputField
},
},
methods: {
function () {
// Function
}
}
}
</script>

Answer 1

尝试将值传递给自定义事件，并在父组件中侦听该事件：

Vue.component('seInput', {
template: `
<div class="">
<input v-on:keyup.enter="$emit('keyup', $event.target.value)"/>
</div>
`
})
new Vue({
el: '#demo',
data() {
return {
inputValue: null
}
},
methods: {
handleInput(val) {
this.inputValue = val
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<h3>{{ inputValue }}</h3>
<se-input @keyup="handleInput"/>
</div>