Vue实际运用四：递归组件-做树状菜单列表

原创

已于 2022-01-21 14:50:10 修改 · 3.9k 阅读

标签

#vue递归组件

收录于

于 2021-12-23 11:06:49 首次发布

本文介绍如何在Vue中使用递归组件创建树状菜单。首先，创建Tree.vue作为入口文件，初始化数据；接着，创建TreeMenu.vue组件，负责递归渲染并接收父组件传递的label和nodes数据；最后，展示实现的树状菜单效果。

递归组件

使用场景：Vue的递归组件，组件递归自身实现无限制层级的渲染，适合树状菜单

1.创建Tree.vue文件，作为组件树的入口文件，类似于App.vue，一些数据data会在Tree.vue进行一些初始化的操作。

<template>
    <div>
    	//通过自定义属性传递 数据给子组件 
        <TreeMenu :label="treeList.label" :nodes="treeList.nodes"></TreeMenu>
    </div>
</template>

<script>
    import TreeMenu from '../components/TreeMenu.vue'
    export default {
        name:'Tree',
        components:{
            TreeMenu
        },
        data(){
            return{
                treeList:{
                    label:'中央',
                    nodes:[
                        {
                            label:'省级',
                            nodes:[{
                                label:'市级'
                            },{
                                label:'地级市'
                            }]
                        },
                        {