Props傳參v-for后TS報錯對象類型是unknow的解決方案

更新時間：2024年03月26日 15:03:28 作者：暴富的im

這篇文章主要介紹了Props傳參v-for后TS報錯對象類型是unknow的解決方案,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

此時的groups是props傳過來的參數(shù)，vue3在模板里面使用props也需要加props。

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

1.此時需要定義一個ts文件對group進(jìn)行定義類型即可

/**
 * 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[]    這里應(yīng)該還需要細(xì)加定義，但是我偷懶了
  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
  }
})

到此這篇關(guān)于Props傳參v-for后TS報錯對象類型是unknow的文章就介紹到這了,更多相關(guān)Props傳參v-for報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue flex 布局實現(xiàn)div均分自動換行的示例代碼
這篇文章主要介紹了vue flex 布局實現(xiàn)div均分自動換行,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
vue 中常用操作數(shù)組的方法(forEach()和reduce())
文章介紹了JavaScript中常用的操作數(shù)組方法,包括forEach()和reduce(),forEach()用于遍歷數(shù)組并對每個元素執(zhí)行操作,而reduce()則用于遍歷數(shù)組并進(jìn)行累加等迭代操作,感興趣的朋友一起看看吧
2025-03-03
Vue3樣式滲透之deep()為什么無效詳解
項目開發(fā)中因為ui設(shè)計常常需要修改vue常用的組件庫（element,antD等等）,這就需要用到樣式穿透,下面這篇文章主要給大家介紹了關(guān)于Vue3樣式滲透之deep()為什么無效的相關(guān)資料,需要的朋友可以參考下
2022-11-11
Vue?watch中監(jiān)聽值的變化,判斷后修改值方式
這篇文章主要介紹了Vue?watch中監(jiān)聽值的變化,判斷后修改值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
淺析Vue.js 中的條件渲染指令
這篇文章主要介紹了Vue.js 中的條件渲染指令，Vue.js 中的條件渲染指令可以根據(jù)表達(dá)式的值，來決定在 DOM 中是渲染還是銷毀元素或組件。本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-11-11
快速解決Vue、element-ui的resetFields()方法重置表單無效的問題
這篇文章主要介紹了快速解決Vue、element-ui的resetFields()方法重置表單無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue3 style CSS 變量注入的實現(xiàn)
本文主要介紹了Vue3 style CSS 變量注入的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-07-07
Vue項目安裝less和less-loader的詳細(xì)步驟
這篇文章主要介紹了Vue項目安裝less和less-loader的詳細(xì)步驟，本文分步驟結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-12-12
關(guān)于Vue.js 2.0的Vuex 2.0 你需要更新的知識庫
關(guān)于Vue.js 2.0 的 Vuex 2.0你需要更新的知識庫，感興趣的小伙伴們可以參考一下
2016-11-11
Vue?中駝峰命名與短橫線分割命名的用法及區(qū)別
在?Vue?中，命名規(guī)范是一個非常重要的話題，駝峰命名和短橫線分割命名都有其各自的優(yōu)缺點(diǎn)和適用場景，開發(fā)者需要根據(jù)實際情況進(jìn)行選擇，這篇文章主要介紹了Vue?中駝峰命名與短橫線分割命名作用及區(qū)別介紹,需要的朋友可以參考下
2023-05-05