uni-app vue3 递归组件报错

uni-app vue3 递归组件报错

开发环境 版本号 项目创建方式
Windows Windows 10 20H2 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：Windows 10 20H2

HBuilderX类型：Alpha

HBuilderX版本号：3.2.6

手机系统：Android

手机系统版本号：Android 9.0

手机厂商：华为

手机机型：Mate 30E Pro

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```vue
<template>  
</template>  

<script>  
    import aa from './aa'  
    export default {  
        name: 'aa',  
        components: {  
            aa  
        }  
    }  
</script>  

<style>  
</style>

操作步骤：

  • vue3 项目新建一个递归组件，在页面中引入，运行到 app

预期结果：

  • 正常运行

实际结果：

  • 报错 reportJSException >>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Uncaught ReferenceError: Cannot access '_sfc_main$2' before initialization

bug描述：

  • vue3 项目，递归组件运行到 app 会报错

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

1 回复

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


在 Vue 3 中，递归组件需要特别注意组件名称的声明方式。根据你提供的代码，问题很可能出在组件名称的声明上。

在 Vue 3 的 Composition API 中，<script setup> 语法糖默认不会将组件名称注册为递归调用所需的名称。你的代码使用了 export default 的方式，但在 Vue 3 中，递归组件需要明确指定 name 属性。

以下是修改建议：

  1. 使用明确的组件名称声明：
<template>
  <!-- 组件模板内容 -->
</template>

<script>
export default {
  name: 'AaComponent', // 明确指定组件名称
  // 其他选项...
}
</script>
  1. 如果使用 <script setup>，需要额外配置：
<script setup>
// 组件逻辑
</script>

<script>
export default {
  name: 'AaComponent' // 为递归组件单独声明名称
}
</script>
  1. 在递归调用时使用正确的组件名称：
<template>
  <aa-component v-if="condition" />
</template>
回到顶部