組件同名報錯、組件嵌套報錯

公司有一個業務需求

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 />		//可以在任何地方用