写了大大小小不少基于vue的项目,但是基本没用到过组件循环引用的知识。
为了查缺补漏,照着官方文档撸一个DEMO:组件之间的循环引用
本人的运行版本为 vue-cli@2.8.1,启用项目后,将以下 js 文件和 vue 文件放置在相应的目录中运行。
main.js
|
|
main.js 导入 App 组件,并在 components 中注册 App 组件。
App.vue
|
|
App 组件导入 TreeFolder 组件,并在 components 中注册 TreeFolder 组件。
components/tree-folder.vue
|
|
TreeFolder 组件导入 TreeFolderContents 组件,并在 components 中注册 TreeFolderContents 组件。
components/tree-folder-contents.vue
|
|
TreeFolderContents 组件又导入 TreeFolder 组件,并在 components 中注册 TreeFolder 组件,产生了循环引用。
参考资料:
1、http://lizhihua.me/2016/12/24/vue/component_circlar-reference/
2、https://cn.vuejs.org/v2/guide/components.html#%E7%BB%84%E4%BB%B6%E9%97%B4%E7%9A%84%E5%BE%AA%E7%8E%AF%E5%BC%95%E7%94%A8
3、https://cn.vuejs.org/v2/guide/components.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6