Props传参v-for后TS报错对象类型是unknow的解决方案

 更新时间:2024年03月26日 15:03:28   作者:暴富的im  
这篇文章主要介绍了Props传参v-for后TS报错对象类型是unknow的解决方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

此时的groups是props传过来的参数,vue3在模板里面使用props也需要加props。

import { defineProps} from 'vue'
const props = defineProps({
  groups: {
    type: Array ,
    default: null
  }
})

 1.此时需要定义一个ts文件对group进行定义类型即可

/**
 * type.ts
 */ 
 export  type IGroup = {   type不能忘记写
  name: string
  color: string
  count: number
  status: string
  icon: string
  headers: [{ name: string; key: string; format: any }]
  data: any[]    这里应该还需要细加定义,但是我偷懒了
  operators: [
    {
      name: string
      icon: string
      handle: any
    }
  ]
}

2.在组件中引入该类型

import { defineProps, type PropType } from 'vue'
import type { IGroup } from '@/api/types'   PS:这里引入要写前面type
const props = defineProps({
  groups: {
    type: Array as unknown as PropType<[IGroup]>,  需要先定义unknown 
    default: null
  }
})

到此这篇关于Props传参v-for后TS报错对象类型是unknow的文章就介绍到这了,更多相关Props传参v-for报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 一文教你如何在Vue项目中使用Emoji表情

    一文教你如何在Vue项目中使用Emoji表情

    这篇文章主要为大家详细介绍了在vue项目中如何使用emoji表情,包括font-awesome图标,v-emoji-picker,vue-emoji等emoji表情库,需要的可以参考下
    2025-03-03
  • vue 2.1.3 实时显示当前时间,每秒更新的方法

    vue 2.1.3 实时显示当前时间,每秒更新的方法

    今天小编就为大家分享一篇vue 2.1.3 实时显示当前时间,每秒更新的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 几个你不知道的技巧助你写出更优雅的vue.js代码

    几个你不知道的技巧助你写出更优雅的vue.js代码

    本文参考自油管上某个国外大神的公开演讲视频,学习了一下觉得很不错,所以在项目中也使用了这些不错的技巧。趁周末有空,写个博客记录一下
    2018-06-06
  • 详解Vue CLI3 多页应用实践和源码设计

    详解Vue CLI3 多页应用实践和源码设计

    这篇文章主要介绍了详解Vue CLI3 多页应用实践和源码设计,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue3中shallowRef和shallowReactive的性能优化

    Vue3中shallowRef和shallowReactive的性能优化

    Vue3中shallowRef和shallowReactive是浅层响应式API,用于性能优化,仅追踪对象或数组第一层属性的变化,本文就来详细的介绍一下具体的使用,感兴趣的可以了解一下
    2024-09-09
  • Vue实现模糊查询搜索功能的步骤详解

    Vue实现模糊查询搜索功能的步骤详解

    本文主要介绍了Vue实现模糊查询搜索功能的步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • Vue Validate表单组件的封装详解

    Vue Validate表单组件的封装详解

    这篇文章主要为大家详细介绍了Vue Validate表单组件的封装的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解下
    2023-09-09
  • vue项目的屏幕自适应多个方案总结

    vue项目的屏幕自适应多个方案总结

    最近在用VUE写大屏页面,遇到屏幕自适应问题,下面这篇文章主要给大家介绍了关于vue项目的屏幕自适应多个方案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue实现锚点定位功能

    vue实现锚点定位功能

    这篇文章主要为大家详细介绍了vue实现锚点定位功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 基于Vue 2.0的模块化前端 UI 组件库小结

    基于Vue 2.0的模块化前端 UI 组件库小结

    AT-UI 是一款基于 Vue.js 2.0 的轻量级、模块化前端 UI 组件库,主要用于快速开发 PC 网站产品。下面通过本文给大家介绍Vue 2.0的模块化前端 UI 组件库,需要的朋友参考下吧
    2017-12-12

最新评论