背景介绍: 本人打算按照官方文档思路写一个用于显示多级目录的组件,思路借鉴官方文档:
所以,分别在脚手架中创建了TreeFold.Vue和TreeFoldContent.Vue两个文件,其中互相引用:
文件TreeFold.Vue代码:
<template >
<div>
<div v-for="(item,key) in root" :key="key">
<p>{{item.label}}</p>
<tree-fold-content v-if="item.children" :root="item.children"></tree-fold-content>
</div>
</div>
</template>
<script>
import TreeFoldContent from './treefoldcontent'
export default {
props:["root"],
name:'TreeFold',
components: {
TreeFoldContent
},
};
</script>
复制代码
文件TreeFoldContend.Vue代码:
<template>
<div>
<div v-for="(item,key) in root" :key="key">
<p>{{item.label }}</p>
<tree-fold v-if="item.children" :root="item.children"></tree-fold>
</div>
</div>
</template>
<script>
import TreeFold from './treefold'
export default {
props:['root'],
name:'TreeFoldContent',
components: {
TreeFold,
},
};
复制代码
结果执行报错:
那么问题来了,错误信息指出TreeFoldContent.vue中没有注册组件<tree-fold>
,但是我明明已经写了如下代码呀(是注册了吧?):
import TreeFold from './treefold'
export default {
props:['root'],
name:'TreeFoldContent',
components: {
TreeFold,
},
};
复制代码
百思不得解,按照官方文档所说,即便发生相互引用也应该报: Failed to mount component: template or render function not defined. 这样的错而不是未注册! 查了一下Overstack似乎也没有人遇到这个问题(这么写确实比较...额...垃圾代码,应该直接写递归的),最后只能再次打开官方文档,赫然写着:
???注册时机有影响???我想我应该查一下这个组件实例化之后到底存不存在!所以输出一下这个组件:果然没有成功注册!那就试试官方手册中的方法,在生命周期中临时注册一下:
beforeCreate() {
this.$options.components.TreeFold = require('./treefold.vue').default
}
复制代码
问题解决了。
总结:
这个问题似乎还是出在循环引用上(两个组件间无法判断起点,导致组件注册失败?),但报错信息却提示未注册(这个问题没能完全理清楚)。不过这提示了一种更通用的方法:遇到这个报错之后第一反应应该立即查一下组件,如果确实不是拼写错误、忘记注册的情况,可以采用声明周期函数手动注册。
转载于:https://juejin.im/post/5cd14b6a518825356d54b64a