菠萝桔子蜜 2021-07-28 17:47 采纳率: 33.3%
浏览 906
已结题

vue使用props数据模板中ts提示找不到名称

提示模板中formItem找不到名称,该提示vscode显示ts报出,是不是与T.props(解构)有关?

相关代码

<template>
 <Form 
   :formItem="formItem"  // 这里提示formItem找不到!!!
 />
</template>
<script lang="ts">
import T from 'ant-design-vue/es/table/Table'
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    ...T.props,
    formItem: {
      type: Array,
      required: true
    }
  }
})
</script>

img

请同志释惑

  • 写回答

2条回答 默认 最新

  • 菠萝桔子蜜 2021-07-29 10:36
    关注

    问题原因:

    经过查看ant design的table部分的源码文件,内部需要的props声明在了defaultTableProps变量内并做出了export导出,所以不应该直接取table模板中的props且props属性是readonly。可能是直接解构T.props导致的ts异常。

    解决办法1 (推荐)

    <script lang="ts">
    import { defaultTableProps } from 'ant-design-vue/es/table/Table'
    props: {
        ...defaultTableProps,
        // 添加/修改_条目
        formItem: {
          type: Array,
          required: true
        }
    }
    </script>
    

    而不是直接import T from 'ant-design-vue/es/table/Table'取模板在解构props,这还是受到了vue2之前的影响(v2写过这个轮子,现在v3重写)

    解决办法2 (比较牵强的法子)

    </template>
      <Modal ref="modal" title="编辑数据" 
       genre="edit">
        <Form 
          :formItem="$props.formItem"
        />
      </Modal>
    </template>
    <script lang="ts">
    import T from 'ant-design-vue/es/table/Table'
    props: {
        ...T.props,
        // 添加/修改_条目
        formItem: {
          type: Array,
          required: true
        }
    }
    </script>
    

    最后:一些不太规范牵强的写法会导致ts产生错误

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 8月10日
  • 已采纳回答 8月2日
  • 修改了问题 7月29日
  • 创建了问题 7月28日

悬赏问题

  • ¥500 亚马逊 COOKIE我如何才能实现 登录一个亚马逊账户 下发新 COOKIE ..我使用下发新COOKIE 导入ADS 指纹浏览器登录,我把账户密码 修改过后,原来下发新COOKIE 不会失效的方式
  • ¥20 玩游戏gpu和cpu利用率特别低,玩游戏卡顿
  • ¥25 oracle中的正则匹配
  • ¥15 关于#vscode#的问题:把软件卸载不会再出现蓝屏
  • ¥15 vimplus出现的错误
  • ¥15 usb无线网卡转typec口
  • ¥30 怎么使用AVL fire ESE软件自带的优化模式来优化设计Soot和NOx?
  • ¥15 Ubuntu20.04.4.LTS系统如何下载安装VirtualBox虚拟机?
  • ¥15 如何用QDomDocument读取内容为空格的xml数据
  • ¥15 请阅读下面代码,帮我修改下代码