未捕获的类型错误:emit不是vue3中的函数

Question

当我在vue 3设置代码块中写下这段代码以获得输入值时，这是代码的一部分：

import { defineComponent } from "vue";
import { defineProps, defineEmits } from 'vue'
export default defineComponent({
setup() {
const props = defineProps({
modelValue: String
})
const emit = defineEmits(['update:modelValue'])
function updateValue(value: any) {
emit('update:modelValue', value)
}
}

运行时应用程序显示错误：

option.js:17388 Uncaught TypeError: emit is not a function
at Proxy.updateValue (option.js:17388:13)
at onInput._cache.<computed>._cache.<computed> (option.js:17428:78)
at callWithErrorHandling (option.js:7359:22)
at callWithAsyncErrorHandling (option.js:7368:21)
at HTMLInputElement.invoker (option.js:15384:90)

我已经定义了发射，为什么还告诉我发射不是一个函数？这是我的vue3组件的完整代码：

<template>
<div id="app">
<div id="wrap">
<label> 
{{ username }}
</label>
<ul class="nav nav-tabs">
<li>
<input 
:value="props" 
placeholder="username" 
v-on:input="updateValue($event.target.value)"/>
<input v-model="password" placeholder="password" />
<button @click="login">Login</button>
</li>
</ul>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { defineProps, defineEmits } from 'vue'
export default defineComponent({
setup() {
const props = defineProps({
modelValue: String
})
const emit = defineEmits(['update:modelValue'])
function updateValue(value: any) {
emit('update:modelValue', value)
}
const login = () => {
debugger
alert(props.modelValue);
};
debugger
return {
login,
updateValue,
props
};
},
components: {},
});
</script>
<style lang="scss" scoped>
</style>

我想从模板输入中获得用户输入用户名。似乎不是这样的。我该怎么办才能解决这个问题？我已经尝试将@vue/compiler-sfc升级到3.2.31，但仍然没有解决这个问题。

Answer 1

defineEmits和defineProps仅用于脚本设置，第一个示例应将props定义为选项，emit是设置挂钩的第二个参数：

import { defineComponent } from "vue";

export default defineComponent({
props:{
modelValue: String
},
setup(props,{emit}) {
function updateValue(value: any) {
emit('update:modelValue', value)
}
}

Answer 2

正如你所说的This expression is not callable error。试试这个：

import { defineComponent } from "vue";

export default defineComponent({
props:{
modelValue: String
},
setup(props,ctx) {
function updateValue(value: any) {
ctx.emit('update:modelValue', value)
}
}