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

2024-05-06

当我在 vue 3 设置代码块中编写此代码以获取输入值时,请遵循此answer https://stackoverflow.com/questions/66737918/how-to-use-v-model-on-component-in-vue-3-script-setup,这是代码的一部分:

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)

我已经定义了emit,为什么仍然告诉我emit不是一个函数?这是我的 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,仍然没有解决这个问题。


defineEmits and defineProps仅在脚本设置中使用,第一个示例应将 props 定义为选项,而emit 是设置挂钩的第二个参数:


import { defineComponent } from "vue";


export default defineComponent({
   props:{
   modelValue: String
  },
  setup(props,{emit}) {

    function updateValue(value: any) {
      emit('update:modelValue', value)
    }
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐