未捕获的类型错误: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
  • TypeScript 3 参数列表交集类型

    打字稿 3 https blogs msdn microsoft com typescript 2018 07 30 announcing typescript 3 0 tuples and parameters改进的参数列表 我正在查看类
  • TypeScript:将模块拆分为多个文件

    我想将同一模块中的类定义拆分为多个文件 所以我确实喜欢这个并且它有效 a ts module MyModule class ClassA b ts module My Module class ClassB 然后我尝试在 ClassB 中使
  • Observable:如果前面有map(),为什么不会导致subscribe()成功?

    我参考这个post https stackoverflow com questions 34671715 angular2 http get map subscribe and observable pattern basic unders
  • 无法使用Vue获取灵活元素的CSS属性值

    我正在尝试获取 CSSwidth灵活元素的属性 但由于某种原因它不起作用 代码笔 https codepen io anon pen pLEwdp editors 1010 https codepen io anon pen pLEwdp
  • 复选框警报控制器 - 添加 3 个按钮

    我用 IONIC 2 Beta 版本制作了一个应用程序 我正在使用复选框警报控制器 并添加两个按钮 确定 和 取消 现在我需要在警报控制器中再添加一个按钮 我在下面实现了添加一个按钮 alert addButton Cancel alert
  • Node.js 10 的 TypeScript tsconfig 设置?

    有谁知道 Node js v10 x 需要哪些目标 库才能在没有生成器的情况下使用内置的 async await 我看到很多关于节点 8 的信息 但没有看到关于节点 10 的信息 从 Node js 开始10 0 0 100 支持ES201
  • 不使用Vue可以使用Vuex吗? (Vuex 服务器端?)

    Vuex 抱怨如果不调用 Vue use Vuex 就无法创建新的 store 实例 虽然这通常没问题 但我正在摆弄使用同一商店编写后端 前端的想法 有人知道答案吗 Thanks TL DR 你可以在 Node 中完美使用 Vuex 无需浏
  • 未向导出的模块提供此上下文

    我对问题的提出感到不满意 受到鼓励提出改进建议 另外 请记住 由于无知 无知导致烦恼 我对问题的诊断可能有缺陷 对于那个很抱歉 In 这个答案 https stackoverflow com a 40893583 1525840建议使用th
  • 如何在 .tsx 打字稿中包含 .css 文件?

    如何在 tsx 中包含 css 文件以及如何使用它 即我如何渲染静态文件 import as React from react import Header from header import home css export class H
  • vue如何检测页面是否刷新?

    我尝试这样 created window addEventListener beforeunload function event event returnValue Write something this router push 像这样
  • QUnit 不会运行测试

    我刚刚开始使用 QUnit 并遇到问题 我目前正在使用 TypeScript 它是一个 JavaScript 编译器 我在与我的主要课程结构平行的课程中进行测试 在每个类中 我都有一个名为 runTests 的函数 为了执行这些测试 我循环
  • 如何在 Typescript 中使用默认值定义可选构造函数参数

    是否可以有带有默认值的可选构造函数参数 如下所示 export class Test constructor private foo string foo private bar string bar 这给了我以下错误 参数不能有问号和初始
  • 使用字符串枚举来扩展 keyof

    我在理解使用字符串枚举来索引类型时的行为时遇到了一些困难 似乎有时 TS 会识别字符串枚举的值是keyof某些类型 有时则不然 为了显示 enum Key FOO foo type MyObj foo string 因此 类型属性的枚举 即
  • ionic2 对菜单项应用 ngx-translate

    我正在使用 ngx translate 来支持多语言 并且运行良好 但我也想申请菜单项 我该如何实现这一目标 我有 3 个菜单项 我想更改每个标题的语言 ts file appPages PageObj title Profile comp
  • “ReactNode”不是有效的 JSX 元素

    我有以下代码 代码沙箱 https codesandbox io s react typescript forked 50beyp file src App tsx import ComponentType ReactNode from r
  • 打字稿标记的枚举获取值

    我在下面标记了枚举 enum PermissionEnum SU 1 lt lt 0 1 Administrator 1 lt lt 1 2 User 1 lt lt 2 4 对于给定值 6 我怎样才能得到 string gt 管理员 用户
  • Angular2:setTimeout仅调用一次

    我正在 Angular2 中实现需要使用的功能setTimeout My code public ngAfterViewInit void this authenticate loop private authenticate loop s
  • Typescript 找不到模块

    我在 Typescript 的一个文件 upload ts 中有一个导出的模块 我无法在没有错误的情况下导入到另一个文件 application ts 中 另外 我无法导入 ExpressJS 这是Upload ts
  • TypeScript 中的可变参数方法至少需要一个参数

    我有一个像这样的方法 getValues args Array

随机推荐