- 前置知识
在说如何实现三级菜单之前,我们需要先对一些基本概念进行了解,这些概念是实现三级菜单的基础,包括:
- 父子组件通讯
-
递归组件
-
父子组件通讯
在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>
- 递归组件
递归组件是指组件自我调用,实现循环嵌套的效果。在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>
- 实现三级菜单
有了前置知识,我们就可以来实现三级菜单了。实现的过程中需要考虑以下几个方面:
- 一级菜单点击展开二级菜单,再次点击关闭二级菜单
- 二级菜单点击展开三级菜单,再次点击关闭三级菜单
- 点击当前菜单以外区域,收起所有菜单
示例:三级菜单组件实现
我们通过创建一个三级菜单组件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>
- 总结
这就是实现三级菜单的攻略,其中涉及到了vue中的父子组件通讯和递归组件。当然,上文只是一个简单的示例,要实现更为复杂的效果还需要进一步的学习和实践。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue递归实现三级菜单 - Python技术站