递归的一种使用,要在vue实现动态菜单,就是组件调用自身来实现。实现效果如图:
目录结构
代码如下(App.vue):在这里插入代码片
<template>
<div id="#app">
<search-list :menuData="menuData"></search-list>
<draw-lottery></draw-lottery>
</div>
</template>
<script>
import SearchList from "./views/SearchList";
// import DrawLottery from "./views/DrawLottery";
export default {
// , DrawLottery
components: { SearchList },
data() {
return {
menuData: [
{
name: "国外文学",
flag: false,
child: [
{
name: "美国",
flag: false,
child: [
{
name: "拉斯维加斯",
flag: false,
child: [{ name: "赌徒心理学" }],
},
],
},
{
name: "日本",
flag: false,
child: [{ name: "东京", flag: false, child: [{ name: "雪国" }] }],
},
{ name: "意大利", flag: false, child: [{ name: "意大利面" }] },
{
name: "法国",
flag: false,
child: [
{ name: "巴黎", flag: false, child: [{ name: "巴黎时装周" }] },
],
},
],
},
{
name: "悬疑",
flag: false,
},
{
name: "都市",
flag: false,
child: [
{
name: "城市文学",
flag: false,
child: [{ name: "城市猎人", flag: false }],
},
{
name: "乡村文学",
flag: false,
child: [{ name: "红房子", flag: false }],
},
{ name: "悲怆文学", flag: false },
],
},
],
};
},
};
</script>
<style lang="less" scoped>
</style>
SerchList.vue:`
<template >
<div class="child-list">
<ul v-for="(item, index) in menuData" :key="index">
<li @click="changeMenu(item)">
<i>{{ item.flag ? "-" : "+" }}</i
> <span>{{ item.name }}</span>
</li>
<!-- 模板 -->
<p v-if="item.child">
<search-list :menuData="item.child" v-show="item.flag"></search-list>
</p>
</ul>
</div>
</template>
<script>
import SearchList from "./SearchList";
export default {
name: "search-list",
components: {
SearchList,
},
props: {
menuData: {
type: Array,
default: [],
},
},
data() {
return {
icon: "+",
};
},
methods: {
changeMenu(item) {
item.flag = !item.flag;
if (item.flag) {
this.icon = "-";
} else {
this.icon = "+";
}
},
},
};
</script>
<style lang="less" scoped>
ul {
list-style: none;
li {
background-color: rgb(14, 233, 160);
cursor: pointer;
border-radius: 10px;
color: #fff;
user-select: none;
margin: 0;
padding: 0;
}
}
</style>