定义TreeMenu文件夹用于存放所有组件
tree-menu组件需要使用插槽
// css样式
.tree-menu {
width: 300px;
background: black;
color: white;
}
在main.js中导入TreeMenu
// 注册TreeMenu组件
import TreeMenu from "@/views/TreeMenu"
Vue.component("TreeMenu.name,TreeMenu")
App.vue中使用tree-menu组件
<template>
<div id="app">
<div class="side-bar">
<tree-menu>
<tree-item>菜单1</tree-item>
<tree-item>菜单2</tree-item>
<tree-item>菜单3</tree-item>
</tree-menu>
</div>
</div>
</template>
这时就需要定义menu-item组件
// menu-item组件
<template>
<div class="menu-item">
<slot></slot>
</div>
</template>
<script>
export default {
name : "menu-item"
}
</script>
<style scoped>
.menu-item {
height: 50px;
text-align: center;
line-height: 50px;
}
</style>
也需要在main.js中进行组件注册
// 注册MenuItem组件
import MenuItem from "./views/TreeMenu2/MenuItem";
Vue.component(MenuItem.name,MenuItem);
继续定义级联菜单组件
在main.js中注册
// 注册下拉组件
import SubMenu from "./views/TreeMenu2/subMenu";
Vue.component(SubMenu.name,SubMenu);
app.vue中使用
// 在此之前可以自行定义menu.js数据
<sub-menu v-else :key="item.id">
<menu-item slot="title">{{ item.title }}</menu-item>
<menu-item v-for="item2 in item.children" :key="item2.id">
{{ item2.title }}
</menu-item>
</sub-menu>
无限级联菜单
<template>
<div>
<sub-menu>
<template #title>{{ data.title }}</template>
<template v-for="c of data.children">
<menu-item :key="c.id" v-if="!c.children"> {{ c.title }} </menu-item>
<re-sub-menu v-else :key="c.id" :data="c" > </re-sub-menu>
</template>
</sub-menu>
</div>
</template>
<script>
export default {
name: "ReSubMenu",
props: { data: Object, }, data() { return {}; },
};
</script>
<style scoped></style>
main.js中配置
// 注册递归组件
import ReSubMenu from "./views/TreeMenu/ReSubMenu";
Vue.component(ReSubMenu.name,ReSubMenu)
APP.vue中使用
<re-sub-menu v-else :key="c.id" :data="c" > </re-sub-menu>
