Vue实现嵌套菜单组件
作者：没你好看
这篇文章主要为大家详细介绍了Vue实现嵌套菜单组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本案例为大家分享了Vue实现嵌套菜单组件的具体代码，供大家参考，具体内容如下
本文旨在使用Vue.js完成一个嵌套的菜单组件，使用mock.js对数据进行模拟，并且最小化复现功能
安装mock
cnpm i mockjs
//引入mockjs
import Mock from 'mockjs'
//使用mockjs模拟数据
Mock.mock('/menuData', 'get', {
"ret": 0,
"data": [{
"id": 1,
"name": "第一层",
"children": [{
"name": "第二层"
},
{
"name": "第二层"
},
{
"name": "第二层"
}
]
},
{
"id": 2,
"name": "第一层",
"children": [{
"name": "第二层"
},
{
"id": 3,
"name": "第二层",
"children": [{
"name": "第三层"
},
{
"name": "第三层"
},
{
"name": "第三层"
}
]
},
{
"id": 4,
"name": "第二层",
"children": [{
"name": "第三层"
},
{
"name": "第三层"
},
{
"id": 5,
"name": "第三层",
"children": [{
"name": "第四层"
},
{
"name": "第四层"
},
{
"id": 6,
"name": "第四层",
"children": [{
"name": "第五层"
},
{
"name": "第五层"
},
{
"name": "第五层"
}
]
}
]
}
]
}
]
}
]
});菜单组件
<!--
* @Author: byron
* @Date: 2022-02-24 09:01:27
* @LastEditTime: 2022-02-24 10:50:38
-->
<template>
<div>
<ul class="menu" v-for="item in data" :key="item.id">
<li
class="subMenu"
@click="showhd(item)"
:class="[item.children ? 'color' : '']"
>
<span> {{ item.name }} {{ item.id }}</span>
</li>
<div class="child" v-if="item.id == currentId && openFlag">
<xxxx v-if="item.children" :data="item.children"></xxxx>
</div>
</ul>
</div>
</template>
<script>
export default {
name: 'xxxx',
components: {},
props: ['data'],
data() {
return {
currentId: undefined,
openFlag: false,
}
},
methods: {
showhd(a) {
console.log(this.openFlag)
this.openFlag = !this.openFlag
this.currentId = a.id
console.log(this.currentId)
console.log(this.openFlag)
},
},
}
</script>
<style scoped>
li {
text-decoration: none;
/* list-style: none; */
}
.ul {
overflow: hidden;
}
.head {
display: none;
}
.show {
display: block;
}
.color {
color: brown;
}
</style>使用菜单组件
<template>
<div id="app">
<h1>嵌套组件的实现</h1>
<HelloWorld :data="menu" />
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios'
export default {
name: 'App',
components: {
HelloWorld,
},
data() {
return {
menu: [],
}
},
async created() {
const { data: r } = await axios.get('/menuData')
this.menu = r.data
console.log(this.menu)
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。