组件递归:
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: "全季"
}]
}]
渲染结果:
引入递归组件:
<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>