未捕获的类型错误: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 中的函数 的相关文章

  • Typescript 中未定义的 d3.scale

    我是 Typescript 的新手 2 周 我正在从事包装 d3 js 框架的项目 我在使用 d3 d ts 命名空间 导出模块 导入时遇到问题 我的问题 当我尝试使用 d3 scale linear 时 浏览器控制台中出现错误 TypeE
  • 在 Angular 2+ 中进行 DOM 操作的正确方法

    我知道有一些类似的问题 但没有人回答我的问题 基本上 以角度方式操作 DOM 的正确方法是什么 比如说我有这个 html
  • 添加滚动到顶部按钮(Ionic 2 | Typescript)

    大家好 我正在尝试添加 滚动到顶部按钮 实现以下内容 1 当用户向下滚动时显示按钮 2 当用户向上滚动时隐藏按钮 3 如果点击该按钮 则滚动到顶部并隐藏该按钮 关于如何使其正确的任何建议 多谢 简化scrollToTop from adri
  • 如何在 vuex nuxt 中获取嵌套 getter

    i have store index js像这样 new Vuex Store modules nav namespaced true modules message namespaced true state count 0 conver
  • 即使我的目标是 ES3,TypeScript 输出仍然使用 Array.prototype.reduce

    我在玩了一下 TypeScript 并发现了一些奇怪的地方 假设我正在构建一个小应用程序 遗憾的是 也需要支持 IE8 所以我将 TypeScript 编译器设置为目标 ES3 我以为我可以安全地使用 ECMAScript 5 1 的好东西
  • 错误:尝试扩展 tslint-microsoft-contrib 时找不到模块“tslint/lib/lint”

    这就是我们的环境 gt node modules bin tslint version 4 0 1 gt npm install save dev tslint microsoft contrib email protected cdn c
  • 在 Typescript 中创建动态变量引用

    提前感谢任何提供帮助的人 对于有经验的人来说 这似乎是一个简单的答案 但我已经浏览了互联网和几本参考书 并没有找到这个问题的直接答案 所以希望它也对其他人有帮助 我目前正在从 Actionscript 过渡到 Typescript 并且对普
  • 打字稿日期格式

    我正在使用角度 2 4 我怎样才能将日期格式化为这个2017 10 03T14 51 06 078Z 下面是我的代码 public today number Date now console log today time this toda
  • 无法使用Vue获取灵活元素的CSS属性值

    我正在尝试获取 CSSwidth灵活元素的属性 但由于某种原因它不起作用 代码笔 https codepen io anon pen pLEwdp editors 1010 https codepen io anon pen pLEwdp
  • Angular 12.1 使用 typescript 添加 html 元素

    我正在通过 youtube 学习 Angular 但我正在尝试做一些新的事情 但我遇到了一个错误 我的代码附在下面 请帮助我 我想这样设置属性div setAttribute click popUp event 但我得到了错误 打字稿 ex
  • Angular 6 http.delete 请求不起作用

    我似乎无法让我的删除请求发挥作用 我已经完成了所有的获取请求 但现在我被困在删除上 似乎无法理解它 console log 的 URL 始终正确 并且删除请求通过 Postman 工作正常 有什么想法吗 HTML
  • Node.js 10 的 TypeScript tsconfig 设置?

    有谁知道 Node js v10 x 需要哪些目标 库才能在没有生成器的情况下使用内置的 async await 我看到很多关于节点 8 的信息 但没有看到关于节点 10 的信息 从 Node js 开始10 0 0 100 支持ES201
  • QUnit 不会运行测试

    我刚刚开始使用 QUnit 并遇到问题 我目前正在使用 TypeScript 它是一个 JavaScript 编译器 我在与我的主要课程结构平行的课程中进行测试 在每个类中 我都有一个名为 runTests 的函数 为了执行这些测试 我循环
  • Vuetify 自动完成类似项目未显示

    我的本地案例中有类似标题的自定义帖子API我尝试通过搜索查询显示帖子items array Data count 5 entries id 3 title Senior developer Python id 4 title Senior
  • 打字稿标记的枚举获取值

    我在下面标记了枚举 enum PermissionEnum SU 1 lt lt 0 1 Administrator 1 lt lt 1 2 User 1 lt lt 2 4 对于给定值 6 我怎样才能得到 string gt 管理员 用户
  • Svelte:无法识别导入的 TypeScript 文件

    我正在尝试使用 Rollup 使用 Svelte 和 TypeScript 构建一个应用程序 当我尝试构建我的 Svelte 组件时 我似乎无法让它编译我的 ts包含的文件 svelte成分 我不断收到此错误 Error Unexpecte
  • Typescript 找不到模块

    我在 Typescript 的一个文件 upload ts 中有一个导出的模块 我无法在没有错误的情况下导入到另一个文件 application ts 中 另外 我无法导入 ExpressJS 这是Upload ts
  • 使用无效数据调用函数 FieldValue.arrayUnion()。 FieldValue.serverTimestamp() 只能与 update() 和 set() 一起使用

    addDeposit account deposit let depositsDoc this db collection accounts doc account id collection deposits doc deposits r
  • TypeScript 代码上的 JSlint - 它还能教我编写更好的代码吗?

    在 TypeScript 生成的代码上使用 JSlint 还能教我编写更好的代码吗 如果是 您能提供一两个例子吗 Thanks 没有 由于生成的 javascript 在不良打字稿 良好打字稿之间是一致的 例如缺少分号 对于打字稿 有一个
  • 如何在 Angular @Input 中仅接受预定义值

    我的问题是 我在 a 中收到一个字符串值作为组件的参数 但我想限制可以用作参数的值 就像enum I use Input type string 但是在组件中 一切都可以引入type正如我之前所说 我需要将其限制为 3 个选项 例如Enum

随机推荐