Vue 自定义组件

Vue实现的无限极菜单

注意点

1：点击的展开或隐藏的时候  会有事件捕获  所以需要@click.stop   来阻止事件捕获

2:  在获取的数据里面设置一个标志  值为boolean  来做展示或者隐藏的功能

3:  无限极涉及到递归调用，这里就是组件自己调用自己   所以给组件一个名字   与文件名相应

4:  props默认的是没有数据的，只有在第二次调用自己的时候  才会有值，所以需要给默认值来展示数据

<template>
    <ul class="menuList" v-show='!expanded'>
        <template v-for="item in menus">
        <li :key="item.id" @click.stop="toggleChildren(item)">{{item.text}}
            <template v-if="item.children ? item.children.length : 0 ">
                <myNav :menusData="item.children" :expanded="item.expanded"></myNav>
            </template>
            <!--
            <ul v-if='item.children.length' v-show='item.expanded' class="childs">
                <li v-for='child in item.children'>{{child.text}}</li>
            </ul>
            -->
        </li>
        </template>
    </ul>
</template>

<script>
import menus from '../api/data.js';

export default {
    name:'myNav',
    data(){
        return {
            menus:[]
        }
    },
    props:['menusData','expanded'],
    methods:{
        toggleChildren: function(item) {
          
            item.expanded = !item.expanded;
        },
        getMenus(){
            this.menus = this.menusData ? this.menusData : menus;
            
            /*
            for(let i=0,l=menus.length;i<l;i++){
                let item = menus[i];
                let menusList = {};
                menusList['id'] = item['id'];
                menusList['text'] = item['text'];
                menusList['expanded'] = item['expanded'];
                this.menus.push(menusList);
            }
            */
        }
    },
    created:function(){
       this.getMenus();
    }
}
</script>

<style>
    ul{margin: 0;pad: 0;list-style: none;}
    li{padding: 10px 0 10px 10px;}
</style>

data.js

let menus = [
    {
        text:'水果',
        id:1,
        expanded:true,
        children:[
            {
                text:'苹果',
                id:10,
                expanded:true,
                children:[
                    {
                        id:101,
                        text:'红富士'
                    },
                    {
                        id:102,
                        text:'安康'
                    }
                ]
            },{
                text:'荔枝',
                id:11
            },{
                text:'葡萄',
                id:12
            },{
                text:'火龙果',
                id:13
            }
        ]
    },{
        text:'好吃的',
        id:2,
        expanded:true,
        children:[
            {
                text:'糖',
                id:21
            },{
                text:'面包',
                id:22
            },{
                text:'火腿',
                id:23
            },{
                text:'薯片',
                id:24
            },{
                text:'碎碎面',
                id:25
            }
        ]
    },{
        text:'饮料',
        id:3,
        expanded:true,
        children:[]
    }
]

export default menus;