Vue開発における多階層メニュー表示の問題の解決策

{
  label: '一级菜单',
  children: [
    {
      label: '二级菜单1',
      children: [
        {
          label: '三级菜单1'
        },
        {
          label: '三级菜单2'
        }
      ]
    },
    {
      label: '二级菜单2',
      children: [
        {
          label: '三级菜单3'
        },
        {
          label: '三级菜单4'
        }
      ]
    }
  ]
}

<template>
  <div>
    <span>{{ item.label }}</span>
    <ul v-if="item.children">
      <li v-for="child in item.children" :key="child.label">
        <menu :item="child"></menu>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  props: ['item']
}
</script>

<template>
  <div>
    <menu v-for="item in menuData" :key="item.label" :item="item"></menu>
  </div>
</template>

<script>
import Menu from './Menu'

export default {
  components: {
    Menu
  },
  props: ['menuData']
}
</script>

<template>
  <div>
    <span @click="clickMenu">{{ item.label }}</span>
    <ul v-if="item.children && item.open">
      <li v-for="child in item.children" :key="child.label">
        <menu :item="child"></menu>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  props: ['item'],
  methods: {
    clickMenu() {
      this.item.open = !this.item.open
    }
  }
}
</script>

<template>
  <div>
    <menu v-for="item in menuData" :key="item.label" :item="item" @selectMenu="selectMenu"></menu>
  </div>
</template>

<script>
import Menu from './Menu'

export default {
  components: {
    Menu
  },
  props: ['menuData'],
  methods: {
    selectMenu(item) {
      console.log(item.label + '被选中')
    }
  }
}
</script>