父组件页面
< 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>