import Page from '../components/Page'
Vue.component('v-page',Page);

做项目时遇到使用循环 组件 ，因为模式一样，只有数据不一样。但是按照普通的 组件 调用格式来做时 报错 ，错误信息为Unknown custom element: – did you register the component correctly? For re cursive components , make su re to pro v ide the “name” option . 查询了官方文档，还有其他的资料，发现是循环调用 组件 时， 组件 比 vue 实例后创建，官方文档里写 组件 必须先于实例化引入，所以说 组件 没有正确的引入。 解决的方式是全局引入 组件 ，并且在 vue 实例化前。 具体代码如下：若在项目中

问题描述：正确的import引入，注册了 组件 ，并在页面使用，一直找不到错误最后才发现是多写了一个 components :{}，在 组件 里写了两个 components ，当然会 报错 ，最后删掉了一个 components 就好了，不细心导致浪费了很多时间，只要有“name” option 多半是钩子函数名字写错了/写了两个一样的函数 <table v-if="item.children"> <tbody> <re cursive -tr v-for="child in item.children" :item="child" :key="child.id"></re cursive -tr> </tbody> </table> </template> <script> export default { name: 're cursive -tr', pro ps: { item: { type: Object, required: true components : { Re cursive Tr: this.$ option s. components .Re cursive Tr </script> 2. 在父 组件 中使用 递归 组件 ，例如： <template> <table> <thead> <th>Name</th> <th>Age</th> <th>Children</th> </thead> <tbody> <re cursive -tr v-for="item in items" :item="item" :key="item.id"></re cursive -tr> </tbody> </table> </template> <script> import Re cursive Tr from './Re cursive Tr. vue ' export default { name: 'table', components : { Re cursive Tr data() { return { items: [ id: 1, name: 'Alice', age: 20, children: [ id: 2, name: 'Bob', age: 10, children: [ id: 3, name: 'Charlie', age: 5 id: 4, name: 'David', age: 8 id: 5, name: 'Eve', age: 25 </script> 这样就可以通过 递归 组件 来拼接 table 的 tr 了。