父组件页面
<template>
<div id='test'>
<ul>
<tree :model="treeData"></tree>
</ul>
</div>
</template>
<script>
import tree from '@/components/tree'
export default {
data () {
return {
treeData: {
title: 'Web全栈架构师',
children: [
{title: 'Java架构师'},
{
title: 'JS高级',
children: [
{title: 'ES6'},
{title: '动效'},
{title: '动效'},
]
},
{
title: 'PHP',
children: [
{
title: 'thinkPhP',
children: [
{
title: 'thinkPhp3.2'
},
{
title: 'thinkPhp5.2'
}
]
},
{title: 'Php动效'},
{title: 'laravel'},
]
},
]
}
}
},
created(){
},
methods:{
},
components: {
tree
}
}
</script>
<style scoped lang="scss">
#test{
}
</style>
子组件页面
<template>
<li>
<div @click="toggle">
{{model.title}}
<span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
</div>
<ul v-show="open">
<tree class="item" v-for="model in model.children" :model="model" :key="model.id"></tree>
</ul>
</li>
</template>
<script>
export default {
name:'tree',
props:{
model: {
type: Object,
require: true
}
},
data () {
return {
open: false
}
},
computed: {
isFolder:function(){
return this.model.children && this.model.children.length;
}
},
created(){
},
methods:{
toggle(){
if (this.isFolder){
this.open = !this.open
}
}
},
components: {
}
}
</script>
<style scoped lang="scss">
#tree{
}
</style>
Processed:
0.009, SQL:
9
