标签：strong 代码 属性 menu 如何 调用函数 compute 获取 cti
自己做个小项目练手，需要用到组件递归，网上查了一些资料，每个代码片段都认识，但是连起来，就一团浆糊。
既然人傻就多思考吧。不明白的点有以下：
1.组件怎么自己调用自己，函数的递归是就是在function fn(){ fn() },组件的递归没有看到这样子的呀。
答：组件中使用name属性，给组件自己定义个名字，这样在组件中就可以自己调用自己了。就像在函数中直接调用函数名来来递归。
2.组件的递归中一层又一层数据是如何获取到的？
答：将嵌套的数据重新赋值给prop设置的属性。
<tree-menu v-for="(item,index) in model.children" v-bind:model="item" v-bind:key="index"></tree-menu>
3.组件递归是怎么结束的？
判断数据中是否存在属性，以及该属性的值不为空。见下面代码中的haschild方法。
hasChild(){ return this.model.children && this.model.children.length }
下面的代码来自https://www.jianshu.com/p/84eb67487113
var demoData = [ { ‘id‘: ‘1‘, ‘menuName‘: ‘基础管理‘, ‘menuCode‘: ‘10‘, ‘children‘: [ { ‘menuName‘: ‘用户管理‘, ‘menuCode‘: ‘11‘ }, { ‘menuName‘: ‘角色管理‘, ‘menuCode‘: ‘12‘, ‘children‘: [ { ‘menuName‘: ‘管理员‘, ‘menuCode‘: ‘121‘ }, { ‘menuName‘: ‘CEO‘, ‘menuCode‘: ‘122‘ }, { ‘menuName‘: ‘CFO‘, ‘menuCode‘: ‘123‘ }, { ‘menuName‘: ‘COO‘, ‘menuCode‘: ‘124‘ }, { ‘menuName‘: ‘普通人‘, ‘menuCode‘: ‘124‘ } ] }, { ‘menuName‘: ‘权限管理‘, ‘menuCode‘: ‘13‘ } ] }, { ‘id‘: ‘2‘, ‘menuName‘: ‘商品管理‘, ‘menuCode‘: ‘‘ }, { ‘id‘: ‘3‘, ‘menuName‘: ‘订单管理‘, ‘menuCode‘: ‘30‘, ‘children‘: [ { ‘menuName‘: ‘订单列表‘, ‘menuCode‘: ‘31‘ }, { ‘menuName‘: ‘退货列表‘, ‘menuCode‘: ‘32‘, ‘children‘: [] } ] }, { ‘id‘: ‘4‘, ‘menuName‘: ‘商家管理‘, ‘menuCode‘: ‘‘, ‘children‘: [] } ]; export default demoData;
<template>
<div class="tree-menu">
<ul v-for="menuItem in theModel">
//使用子组件，并将数据传给子组件的model属性上，供子组件使用。
<my-tree :model="menuItem"></my-tree>
</ul>
</div>
</template>
<script>
import testData from ‘./testdata‘;
import myTree from ‘./treeMenu‘;
export default {
//name属性是组件的名字，这样组件才能调用组件自己。
name: "side-bar",
components: {
//即treeMenu文件，它在side-bar组件中的名字设置为了myTree。
myTree
},
data() {
return {
//绑定数据供v-for循环使用。
theModel: testData
}
}
}
</script>
<template> <li>
//控制图标的显示 <span @click="toggle"> <i v-if="hasChild" class="icon" v-bind:class="[open ? ‘folder-open‘: ‘folder‘ ]"></i> <i v-if="!hasChild" class="icon file-text"></i> {{model.menuName}} </span>
//判断数据中是否有可遍历的子元素。 <ul v-show="open" v-if="hasChild">
//如果有调用组件自己（tree-menu），获取下一层可以遍历的数据，将下一层数据绑定到model作为model新的数据。
//key用来标识组件的唯一性，避免重复渲染。
<tree-menu v-for="(item,index) in model.children" v-bind:model="item" v-bind:key="index"></tree-menu> </ul> </li> </template> <script> export default {
//name属性定义组件名，有了名字组件才可以调用自己。 name: "treeMenu", props: [‘model‘], data(){ return { open:false } }, computed:{ hasChild(){ return this.model.children && this.model.children.length } }, methods:{ toggle(){ if(this.hasChild){ this.open = !this.open } } } } </script>
标签：strong 代码 属性 menu 如何 调用函数 compute 获取 cti
原文地址：https://www.cnblogs.com/qiu-freedom/p/10352792.html
