【已解决】报错：Unknown custom element: ＜xxx＞ - did you register the component correctly? （vue 导入导出使用花括号的问题）

---

---

一、问题

在套用vue-element-admin的项目中使用pagination组件时遇到报错：

vue.runtime.esm.js:619 [Vue warn]: Unknown custom element: <pagination> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <List> at src/views/book/list.vue
       <AppMain> at src/layout/components/AppMain.vue
         <Layout> at src/layout/index.vue
           <App> at src/App.vue
             <Root>

未知的自定义元素:<xxx> -你是否正确注册组件

二、原因分析

在使用组件pagination的地方已经完成引入：

import { Pagination } from '@/components/Pagination'

export default {
  components: { Pagination },
  ...

Pagination组件中也有报错中所指的"name" option：

export default {
  name: 'Pagination',

Pagination是将element-ui中的el-pagination组件重新封装的产物

报错原因：

循环调用组件时，组件比vue实例后创建，官方文档里写组件必须先于实例化引入，所以说组件没有正确的引入。

三、解决

解决的方式是全局引入组件，并且在vue实例化前。
具体代码如下：若在项目中，一般是在main.js里引入：

import Pagination from './components/Pagination'

Vue.component('Pagination', Pagination)
...
new Vue({...})

。。。

后来发现，想多了。。。在使用处直接这样就可以了：

import Pagination from '@/components/Pagination'

---

记住口诀：导入部分，引入非 default 时，使用花括号；全部导入不用花括号。

四、拓展学习

1.什么是分页思想？

• 项目开发场景中，经常会有涉及数据列表，大多都是使用表格（table），但是当数据量较大，已经明显影响到前端渲染这时候就需要使用分页（pagination）。
• 什么是分页呢？前端向后端传当前页码和页容量，后端通过页容量分页数据后拿到当前页码数据，然后传输给前端，这是目前普遍适用的方式。
• 当然在一些场景比如移动端需要滚动加载，这里虽然没有使用分页组件，但是也是通过分页思想来实现的（滚动触发页码+1，数据拼接到原有数据后）。
• 还有极个别情况，比如我方项目组后端并没有访问数据库权限，是调用第三方未提供分页功能的接口来实现，这时就需要由前端自行处理分页。

前端自行处理需要格外注意性能优化，可以使用 懒加载+分页，或使用使用 虚拟滚动 技术，可参考 徐小夕@趣谈前端 大佬的方案：

• [当后端一次性丢给你10万条数据, 作为前端工程师的你,要怎么处理?]：(https://blog.csdn.net/KlausLily/article/details/106654398)

2.如何在使用分页时做到人性化？

为尽可能做到合理和人性化，再列表操作过程中以下几个细节需要特别考虑：

• 每次操作过后，重新请求接口，且展示当前页码数据（不要返回首页），以保证数据与库中一致；
• 在删除操作时，考虑所删除的当前数据是不是当前页的最后一条，如果是，只要当前页不是第一页那就需要回到上一页。

let len = this.tableData.length
if (len !== 1) {
  this.getList(params)
} else if (current !== 1) {
  this.getList(Object.assign(params, {current: current -1}))
}

---

拓展：

后端实现分页：

• springboot+mybatis+pageHelper
• listMap.subList(firstIndex, lastIndex)
• select * from table limit (pageNum-1)*pageSize,pageSize