首先模拟的数据:
const tree = {
name: '电子产品',
children: [
{
name: '电视',
children: [
{
name: 'philips',
children: [
{ name: 'philips-A' },
{ name: 'philips-B' }
]
},
{ name: 'Tcl' },
{ name: '海信' }
]
},
{
name: '电脑',
children: [
{ name: 'Mac Air' },
{ name: 'Mac Pro' },
{
name: 'ThinkPad',
children: [
{
name: 'ThinkPad-A',
children: [
{ name: 'ThinkPad-A-A' },
{ name: 'ThinkPad-A-B' },
{ name: 'ThinkPad-A-C' }
]
},
{ name: 'ThinkPad-B' }
]
}
]
},
{
name: '可穿戴设置',
children: [
{
name: '手表',
children: [
{ name: 'iWatch' },
{ name: '小米watch' }
]
}
]
}
]
}
将这个数据从父组件传到子组件,
<shu :title="tree.name" :list="tree.children" :depth="0"></shu>
import shu from './views/digui'
继续在子组件中写的的是
<template>
<div>
<p :style=" int " @click="dianji">{{ title }}</p>
<div v-if="flog">
<Shu
v-for="( item, key) in list"
:key="key" :title="item.name"
:list="item.children"
:depth="depth+1"
></Shu>
</div>
</div>
</template>
<script>
export default {
name: "Shu",//要和上面的组件相同
data(){
return{
flog:true
}
},
props: {
title: {
type: String,
default: "服装"
},
list: {
type: Array
},
depth: {
type: Number
}
},
computed:{
int(){
return `transform:translate(${ this.depth*20 }px)` //让数据缩进
}
},
methods: {
dianji(){
this.flog = !this.flog //让数据点击隐藏显示
}
},
};
</script>
<style lang="scss" scoped>
</style>