Vue實現(xiàn)嵌套菜單組件

更新時間：2022年07月15日 16:02:05 作者：沒你好看

這篇文章主要為大家詳細介紹了Vue實現(xiàn)嵌套菜單組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本案例為大家分享了Vue實現(xiàn)嵌套菜單組件的具體代碼，供大家參考，具體內容如下

本文旨在使用Vue.js完成一個嵌套的菜單組件，使用mock.js對數據進行模擬，并且最小化復現(xiàn)功能

安裝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>嵌套組件的實現(xiàn)</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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: