公司有一个业务需求
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 /> //可以在任何地方用