uni-app vue3+ts 组件递归报错

uni-app vue3+ts 组件递归报错

操作步骤：

  • 这样导入的组件import collapse from '@/pages-common/components/search-location/collapse.vue'

预期结果：

  • 没有错误提示

实际结果：

  • 类型“VueInstance”上不存在属性“districts”。

bug描述：

  • 在vue3中，标记ts递归后出现错误提示：类型“VueInstance”上不存在属性“districts”。
  • 但是代码能跑

附件

image

信息类别 信息内容
产品分类 uniapp/小程序/微信
PC开发环境 Windows
PC开发环境版本 win11 家庭中文
HBuilderX类型 正式
HBuilderX版本 4.64
第三方开发者工具 2412050
基础库版本 3.7.11
项目创建方式 HBuilderX

更多关于uni-app vue3+ts 组件递归报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

hello ， 你可以提供一下可以复现的最小项目吗？

更多关于uni-app vue3+ts 组件递归报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我新发了一张图片，一看就会

案例图片

你这写法有问题吧，怎么自己引用自己

回复 DCloud_UNI_yuhe: 递归不是这样写吗？做了一个递归菜单，一层套一层，那这种需求应该怎么做呢？

这是Vue3+TS的类型推断问题。递归组件在Vue3中需要正确处理类型定义。

解决方法：

  1. 为递归组件添加类型声明：
declare module '@vue/runtime-core' {
  interface GlobalComponents {
    Collapse: typeof import('@/pages-common/components/search-location/collapse.vue')['default']
  }
}
  1. 或者在组件内部定义props类型：
defineProps<{
  districts: Array<{
    name: string
    children?: Array<any>
  }>
}>()
  1. 如果使用选项式API，可以这样定义：
export default defineComponent({
  props: {
    districts: {
      type: Array as PropType<Array<{
        name: string
        children?: Array<any>
      }>>,
      required: true
    }
  }
})
回到顶部