vue递归多级菜单

首先模拟的数据：

const tree = {
  name: '电子产品',
  children: [
    {
      name: '电视',
      children: [
        {
          name: 'philips',
          children: [
            { name: 'philips-A' },
            { name: 'philips-B' }
          ]
        },
        { name: 'Tcl' },
        { name: '海信' }
      ]
    },
    {
      name: '电脑',
      children: [
        { name: 'Mac Air' },
        { name: 'Mac Pro' },
        {
          name: 'ThinkPad',
          children: [
            {
              name: 'ThinkPad-A',
              children: [
                { name: 'ThinkPad-A-A' },
                { name: 'ThinkPad-A-B' },
                { name: 'ThinkPad-A-C' }
              ]
            },
            { name: 'ThinkPad-B' }
          ]
        }
      ]
    },
    {
      name: '可穿戴设置',
      children: [
        {
          name: '手表',
          children: [
            { name: 'iWatch' },
            { name: '小米watch' }
          ]
        }
      ]
    }
  ]
}

将这个数据从父组件传到子组件，

 <shu :title="tree.name" :list="tree.children" :depth="0"></shu>
 import shu from './views/digui'

继续在子组件中写的的是

<template>
  <div>
      <p :style=" int " @click="dianji">{{ title }}</p>
      <div v-if="flog">
        <Shu
       v-for="( item, key) in list"
        :key="key" :title="item.name" 
        :list="item.children"
        :depth="depth+1"   
        ></Shu>
      </div>

  </div>
</template>
<script>
export default {
  name: "Shu",//要和上面的组件相同
  data(){
    return{
flog:true
    }
  },
  props: {
    title: {
      type: String,
      default: "服装"
    },
    list: {
      type: Array
    },
    depth: {
      type: Number
    }
  },
  computed:{
    int(){
      return `transform:translate(${ this.depth*20 }px)`   //让数据缩进
    }
  },
  methods: {
    dianji(){
      this.flog = !this.flog     //让数据点击隐藏显示
    }
  },
};
</script>
<style lang="scss" scoped>
</style>