uniapp 使用uni组件报错unknown custom element: <list-item> - did you register如何解决？

在uniapp中使用uni组件时遇到报错“unknown custom element: <list-item> - did you register”，请问该如何解决？我已经按照文档引入了组件，但依然提示未注册。

2 回复

在页面中引入组件：

<list-item></list-item>

并在 script 中注册：

import listItem from '@/components/list-item.vue'
export default {
  components: { listItem }
}

这个错误表示 <list-item> 组件未正确注册。以下是解决方案：

1. 检查组件导入和注册

情况一：使用官方组件

// 在页面或组件的 script 中
import listItem from '@/components/list-item/list-item.vue'

export default {
  components: {
    listItem
  }
}

情况二：使用全局注册

// 在 main.js 中
import listItem from '@/components/list-item/list-item.vue'
Vue.component('list-item', listItem)

2. 检查组件路径

确保组件路径正确：

// 正确示例
import listItem from '@/components/list-item/list-item.vue'
// 或相对路径
import listItem from '../../components/list-item/list-item.vue'

3. 检查组件文件是否存在

确认 components/list-item/list-item.vue 文件确实存在。

4. 使用 easycom 自动导入（推荐）

在 pages.json 中配置：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^list-item(.*)": "@/components/list-item/list-item.vue"
    }
  }
}

5. 检查组件名称大小写

确保模板中的组件名与注册名一致：

<!-- 正确 -->
<list-item />

<!-- 如果注册为 ListItem -->
<ListItem />

快速排查步骤：

  1. 确认组件文件存在且路径正确
  2. 检查 import 语句是否正确
  3. 验证 components 注册
  4. 重启开发工具

使用 easycom 方式可以避免手动注册，是 uniapp 推荐的做法。

回到顶部