vue 组件递归、组件相互依赖问题

秒速五厘米 2021-07-25 02:50 606阅读 0赞

组件递归:
    	1、设置组件name名称
    	
    	2、在模板中直接使用
    		<名称 />
    		xx-Yy的名称要写成<xxyy />
    	
    	3、使用时传入参数的方式和组件在其他组件中使用相同,注意递归终止条件
    		<xx :props="props">  倘若组件需要传参数
    
    组件依赖:
    	两个组件称为A和B,首先A依赖B,但是B又依赖 A,但是A又依赖B,这变成了一个循环,不知道如何不经过其中一个组件而完全解析出另一个组件。
    	解决方式一:
    		在生命周期钩子beforeCreate时去注册不需要解析的组件:
    		beforeCreate: function () {
    		  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
    		}
    			
    	解决方式二:
    		使用异步方式导入组件:q
    		components: {
    		  TreeFolderContents: () => import('./tree-folder-contents.vue')
    		}

代码示例:  
数据:

list: [{ 
        name: "经济",
        children: [{ 
            name: "如家"
        }, { 
            name: "7天"     
        }]
    }, { 
        name: "舒适",
        children: [{ 
            name: "智选假日"
        }, { 
            name: "全季"     
        }]
    }]

渲染结果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]引入递归组件:

<template>
        <div class="list-detail">
          <list :list="list"></list>
        </div>
    </template>
    <script>
    import List from "./components/List";
    export default { 
      name: "Parent",
      components: {  List },
      data() { 
        return { 
          list: [{ 
              name: "经济",
              children: [{ 
                  name: "如家",
                  children: [{ 
                      name: "上江路-如家"
                    },
                    { 
                      name: "望江路-如家"
                    }]
                },{ 
                  name: "7天",
                  children: [{ 
                      name: "长江路-7天"
                    },
                    { 
                      name: "望江路-7天"
                    }]
                }]
            }]
        }
      }
    }
    </script>

递归组件:

<template>
        <div>
            <div class="list-item" v-for="(item, index) in list" :key="index">
                <div class="item-name">
                    <span>{ { item.name}}</span>
                </div>
                <div v-if="item.children" class="children-item">
                	//递归处
                    <list :list="item.children"></list>
                </div>
            </div>
        </div>
    </template>
    <script>
    export default { 
      name: "List",
      props: { 
        list: Array
      }
    };
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/81521cdddc8a41fe913094baf86796aa.png