组件同名报错、组件嵌套报错

公司有一个业务需求

1、公司列表页可以点击“详情”查看公司详情

2、在公司详情下，通过展示的项目列表的“详情”，可看项目详情

3、在项目详情下，在“公司”页签可以看到这个下期下关联的公司列表，点击这边的“详情”，打开公司的详情

4、这时候打开的公司详情，和通过菜单“公司列表”进去的详情是一样的

之前页面接口都没有问题，但是到这一步时会报如下错误：

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

这上面的注册的都是子组件，然后组件之间是嵌套的，同一个子组件被多次调用，所以我的解决思路是换成全局组件试试
然后我把需要多次调用的组件注册成了全局组件，错误就没有了

5、下面是官网对name的解释说明

6、注册全局组件

方法一

我这边是自己写的组件，如何vue.use()来使用的

（1）先创建一个 xiangmu.vue 组件（因为我上面的组件就是项目列表进去的）

<template>
    <div>
        {{msg}}
    </div>    
</template>
<script>
export default {
    data() {
        return {
            msg:'我是项目详情'
        }
    }
}
</script>

（2）在组件的同级目录下，再创建一个idnex.js文件(名字可以随便起)

import xiangmuComponent from './loading.vue';

const xiangmu = {
    install:function(Vue) {
        Vue.component('Xiangmu', xiangmuComponent)
    }
}

export default xiangmu;

（3）在main.js文件中引入自定义组件

import Vue from 'vue'
import App from './App.vue'
import xiangmu from './components/xiangmu/'

Vue.use(xiangmu);

new Vue({
  el: '#app'
  render: h => h(App)
})

（4）使用

<Xiangmu />		//可以在任何地方用

方法二

这种全局注册组件的方法是官方文档上提供的，链接如下：
https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C

（1）先创建一个 xiangmu.vue 组件，如上

<template>
    <div>
        {{msg}}
    </div>    
</template>
<script>
export default {
    data() {
        return {
            msg:'我是项目详情'
        }
    }
}
</script>

（2）在main.js文件中引入自定义组件并注册

import xiangmu from './components/xiangmu/'
Vue.component('Xiangmu', xiangmu)

new Vue({
  el: '#app'
  render: h => h(App)
})

（3）使用如上

<Xiangmu />		//可以在任何地方用