vue递归实现三级菜单

1. 前置知识

在说如何实现三级菜单之前，我们需要先对一些基本概念进行了解，这些概念是实现三级菜单的基础，包括：

• 父子组件通讯

• 递归组件

• 父子组件通讯

在vue中，组件之间的通讯主要有两种方式：props和$emit事件传递。props是父组件向子组件传递数据，而$emit事件传递则是子组件向父组件传递数据。

示例：父组件向子组件传递数据

在父组件中，我们通过在子组件标签上添加props，并传递需要传递的数据。

<template>
  <div>
    <MySubComponent :content="subContent"></MySubComponent>
  </div>
</template>

<script>
import MySubComponent from './MySubComponent.vue'
export default {
  components: { MySubComponent },
  data() {
    return {
      subContent: 'hello world'
    }
  }
}
</script>

而在子组件中，只需在props中声明需要接收的data，然后就可以通过{{}}的形式在模板中引用了。

<template>
  <div>
    {{ content }}
  </div>
</template>

<script>
export default {
  props: {
    content: {
      type: String,
      default: ''
    }
  }
}
</script>

1. 递归组件

递归组件是指组件自我调用，实现循环嵌套的效果。在vue中，递归组件可以通过在组件内部嵌套组件并使用name属性实现。

示例：简单递归组件

这是一个简单的递归组件示例，实现了向下无限递归的效果。

<template>
  <div>
    <div>{{ level }}</div>
    <ul>
      <li v-for="item in list">
        <MyComponent :level="level + 1" :list="item.list"></MyComponent>
      </li>
    </ul>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'
export default {
  name: 'MyComponent',
  components: { MyComponent },
  props: {
    level: {
      type: Number,
      default: 0
    },
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

1. 实现三级菜单

有了前置知识，我们就可以来实现三级菜单了。实现的过程中需要考虑以下几个方面：

• 一级菜单点击展开二级菜单，再次点击关闭二级菜单
• 二级菜单点击展开三级菜单，再次点击关闭三级菜单
• 点击当前菜单以外区域，收起所有菜单

示例：三级菜单组件实现

我们通过创建一个三级菜单组件MyMenu.vue来实现三级菜单的效果。在这个组件中，我们主要需要实现以下几个功能：

• 初始化一级菜单数据
• 点击一级菜单，显示和隐藏二级菜单
• 点击二级菜单，显示和隐藏三级菜单
• 点击当前菜单以外区域，收起所有菜单

MyMenu.vue的具体实现如下所示：

<template>
  <div class="menu">
    <ul>
      <li v-for="(item, index) in menuData" :key="index">
        <div
          class="menu-item"
          @click="handleMenuClick(item)"
          :class="{ active: activeIndex === index }"
        >
          {{ item.title }}
        </div>
        <div class="sub-menu" v-show="activeIndex === index">
          <MyMenu :data="item.children" v-if="item.children"></MyMenu>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import MyMenu from './MyMenu.vue'

export default {
  name: 'MyMenu',
  components: {
    MyMenu
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      menuData: this.data,
      activeIndex: -1
    }
  },
  watch: {
    data() {
      this.menuData = this.data
      this.activeIndex = -1
    }
  },
  methods: {
    handleMenuClick(item) {
      this.activeIndex = this.activeIndex === item.index ? -1 : item.index
    },
    handleOutsideClick() {
      this.activeIndex = -1
    }
  },
  mounted() {
    document.addEventListener('click', this.handleOutsideClick)
  },
  beforeUnmount() {
    document.removeEventListener('click', this.handleOutsideClick)
  }
}
</script>

1. 总结

这就是实现三级菜单的攻略，其中涉及到了vue中的父子组件通讯和递归组件。当然，上文只是一个简单的示例，要实现更为复杂的效果还需要进一步的学习和实践。

阅读剩余 73%