Vue--引用组件

柔光的暖阳◎ 2022-12-22 11:15 182阅读 0赞

原文网址：[Vue--引用组件\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN]

# 递归 #

## **简介** ##

**其他网址**

> [Vue中组件的递归使用方法\_东逝水-CSDN博客][Vue_-CSDN]

**说明**

> Vue组件是天然支持递归使用的，只需要在引用自己时使用跟该组件name相同的tag就行了 。

## 递归实例 ##

**其他网址**

> [vue 递归组件 及动态样式的实现\_学习记录-CSDN博客][vue _ _-CSDN]

**文件目录树实例**

> **router/index.js**
> 
>     import Vue from 'vue'
>     import Router from 'vue-router'
>     import CompA from "@/components/CompA";
>     
>     Vue.use(Router)
>     
>     export default new Router({
>       routes: [
>         {
>           path: '/compA',
>           name: 'compA',
>           component: CompA
>         }
>       ]
>     })

> **components/CompA.vue**
> 
>     <template>
>       <div class="compA">
>         <tree-parent :folders="realFolders"></tree-parent>
>       </div>
>     </template>
>     
>     <script>
>     import TreeParent from "@/components/TreeParent";
>     export default {
>       components: {TreeParent},
>       data() {
>         return {
>           realFolders: [
>             {
>               name: "1",
>               childs: [{
>                 name: "1-1",
>                 childs:[{
>                   name: "1-1-1"
>                 }]
>               },{
>                 name: "1-2"
>               }]
>             },
>             {
>               name: "2",
>               childs: [{
>                 name: "2-1",
>                 childs: [
>                   {
>                     name: "2-1-1"
>                   },
>                   {
>                     name: "2-1-2"
>                   }
>                 ]
>               }]
>             }
>           ]
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>

> **components/TreeRecursion.vue**
> 
>     <template>
>       <div class="treeRecursion">
>         <ul>
>           <li v-for="folder in folders">
>             <span>{
>         { folder.name }}</span>
>             <tree-recursion v-if="folder.childs" :folders="folder.childs"></tree-recursion>
>           </li>
>         </ul>
>       </div>
>     </template>
>     
>     <script>
>     export default {
>       name: "TreeRecursion",
>       props: ["folders"]
>     }
>     </script>
>     
>     <style scoped>
>     
>     </style>

**测试**

> 访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]

## 递归加折叠实例 ##

**其他网址**

> [vue递归组件简单实现一个树形组件\_海阔天空-CSDN博客][vue_-CSDN]

**简介**

> 与上边“**递归实例**”相比，仅仅修改components/TreeRecursion.vue。

**components/TreeRecursion.vue**

>     <template>
>       <div class="treeRecursion">
>         <ul>
>           <li v-for="folder in folders" :id="folder.name">
>             <span @click="toggleChilds(folder)">{
>         { folder.name }}</span>
>             <tree-recursion v-if="folder.childs && folder.unfolded" :folders="folder.childs"></tree-recursion>
>           </li>
>         </ul>
>       </div>
>     </template>
>     
>     <script>
>     
>     export default {
>       name: "TreeRecursion",
>       props: ["folders"],
>       data() {
>         return {
>           show: true
>         }
>       },
>     
>       methods: {
>         toggleChilds(folder) {
>           if (folder.unfolded === undefined) {
>             this.$set(folder, 'unfolded', true);
>           } else {
>             folder.unfolded = !folder.unfolded;
>           }
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     
>     </style>

**测试**

> 访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> 此时只有顶层
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1][]
> 
> 点击“1”：（此时展开了子层的节点）
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2][]

# 循环引用 #

> [处理边界情况 - 循环引用 - 《Vue.js v2.x 官方教程》 - 书栈网 · BookStack][- _ - _Vue.js v2.x _ - _ _ BookStack]  
> [组件之间循环引用\_灵灵7的博客-CSDN博客][7_-CSDN]

## **简介** ##

**描述**

> 本处我们构建一个文件目录树，像资源管理器那样的。
> 
> TreeParent 组件模板如下：
> 
>     <ul>
>       <li v-for="thisFolder in folders">
>         <tree-child v-if="thisFolder.childs" :folder="thisFolder"></tree-child>
>         <span v-else>{
>         { thisFolder.name }}</span>
>       </li>
>     </ul>
> 
> TreeChild组件模板如下：
> 
>     <span v-if="folder.childs">
>         <span>{
>         {folder.name}}</span>
>         <tree-parent :folders="folder.childs"></tree-parent>
>     </span>
> 
> 这些组件在渲染树中互为对方的后代和祖先，形成循环引用。如果你使用一个模块系统依赖/导入组件，例如通过 webpack 或 Browserify，会遇到一个错误：
> 
>     Failed to mount component: template or render function not defined.

**循环引用解决方法**

> **法1.使用 webpack 的异步 import**
> 
>     TreeParent：components: {TreeChild: () => import("./TreeChild")},
>     TreeChild：components: {TreeParent: () => import("./TreeParent")},
> 
> **法2.在 beforeCreate 时去注册**
> 
>     TreeParent：
>         beforeCreate: function () {
>           this.$options.components.TreeChild = require('./TreeChild').default
>         }
>     
>     TreeChild：
>         beforeCreate: function () {
>           this.$options.components.TreeParent = require('./TreeParent').default
>         }
> 
> **法3.通过 Vue.component 全局注册**

**原理**

> 把两个组件称为 A 和 B。模块系统发现它需要 A，但是首先 A 依赖 B，但是 B 又依赖 A，但是 A 又依赖 B，如此往复。这变成了一个循环，不知道如何不经过其中一个组件而完全解析出另一个组件。为了解决这个问题，我们需要给模块系统一个点，在那里“A 反正是需要 B 的，但是我们不需要先解析 B。”

## 循环引用实例 ##

**router/index.js**

>     import Vue from 'vue'
>     import Router from 'vue-router'
>     import CompA from "@/components/CompA";
>     
>     Vue.use(Router)
>     
>     export default new Router({
>       routes: [
>         {
>           path: '/compA',
>           name: 'compA',
>           component: CompA
>         }
>       ]
>     })

**components/CompA.vue**

>     <template>
>       <div class="compA">
>         <tree-parent :folders="realFolders"></tree-parent>
>       </div>
>     </template>
>     
>     <script>
>     import TreeParent from "@/components/TreeParent";
>     export default {
>       components: {TreeParent},
>       data() {
>         return {
>           realFolders: [
>             {
>               name: "1",
>               childs: [{
>                 name: "1-1",
>                 childs:[{
>                   name: "1-1-1"
>                 }]
>               },{
>                 name: "1-2"
>               }]
>             },
>             {
>               name: "2",
>               childs: [{
>                 name: "2-1",
>                 childs: [
>                   {
>                     name: "2-1-1"
>                   },
>                   {
>                     name: "2-1-2"
>                   }
>                 ]
>               }]
>             }
>           ]
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>

**components/TreeParent.vue**

>     <template>
>       <div class="treeParent">
>         <ul>
>           <li v-for="thisFolder in folders">
>             <tree-child v-if="thisFolder.childs" :folder="thisFolder"></tree-child>
>             <span v-else>{
>         { thisFolder.name }}</span>
>           </li>
>         </ul>
>       </div>
>     </template>
>     
>     <script>
>     export default {
>       components: {TreeChild: () => import("./TreeChild")},
>       props: ["folders"],
>     }
>     </script>
>     
>     <style scoped>
>     </style>

**components/TreeChild.vue**

>     <template>
>       <div class="treeChild">
>         <span v-if="folder.childs">
>             <span>{
>         {folder.name}}</span>
>             <tree-parent :folders="folder.childs"></tree-parent>
>         </span>
>       </div>
>     </template>
>     
>     <script>
>     export default {
>       components: {TreeParent: () => import('./TreeParent')},
>       props: ['folder'],
>     }
>     </script>
>     
>     <style scoped>
>     </style>

**测试**

## 循环引用加折叠实例 ##

**简介**

> 与上边“循环引用实例”相比，仅修改components/TreeParent.vue。

**components/TreeParent.vue**

>     <template>
>       <div class="treeParent">
>         <ul>
>           <li v-for="thisFolder in folders">
>             <tree-child v-if="thisFolder.childs && thisFolder.unfolded" :folder="thisFolder"></tree-child>
>             <span v-else @click="toggleChilds(thisFolder)">{
>         { thisFolder.name }}</span>
>           </li>
>         </ul>
>       </div>
>     </template>
>     
>     <script>
>     export default {
>       components: {TreeChild: () => import("./TreeChild")},
>       props: ["folders"],
>       methods: {
>         toggleChilds(folder) {
>           console.log(folder);
>           if (folder.unfolded === undefined) {
>             this.$set(folder, 'unfolded', true);
>           } else {
>             folder.unfolded = !folder.unfolded;
>           }
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>

**测试**

> 访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> 此时只显示顶层
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4][]
> 
> 点击“1”：（此时展开了子层的节点）
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 5][]

[Vue--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/109830477
[Vue_-CSDN]: https://blog.csdn.net/txyzqc/article/details/109007728
[vue _ _-CSDN]: https://blog.csdn.net/z9061/article/details/106059322
[http_localhost_8080_compA]: http://localhost:8080/#/compA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20221120/c26d852a32c64768a28a353a844c484b.png
[vue_-CSDN]: https://blog.csdn.net/weixin_41804429/article/details/109694200
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: /images/20221120/f83c421932694d999f1d342817fb7487.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2]: /images/20221120/3e4417e01c974dce9ddc73fc569de2a4.png
[- _ - _Vue.js v2.x _ - _ _ BookStack]: https://www.bookstack.cn/read/vue-v2.x/spilt.3.f25594be3f243f3b.md
[7_-CSDN]: https://blog.csdn.net/weixin_41796631/article/details/83687632
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201121184110397.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201122154610184.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201122154701926.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70