<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="vue.js"></script>
</head>
<body>
<div>
<h1>--组件之间的循环引用--</h1>
<div id="example1">
<tree-folder v-bind:folder="folder"></tree-folder>
</div>
<script>
// 定义组件
Vue.component('tree-folder', {
props: {
folder: Object
},
template: '
<p>
<span>{{ folder.name }}</span>
<tree-folder-contents v-bind:children="folder.children"></tree-folder-contents>
</p>
'
})
Vue.component('tree-folder-contents', {
props: {
children: Array
},
template: '
<ul>
<li v-for="child in children">
<tree-folder v-if="child.children" v-bind:folder="child"></tree-folder>
<span v-else>{{ child.name }}</span>
</li>
</ul>
'
})
// Vue 根实例
var example1 = new Vue({
el: '#example1',
data: {
folder: {
name: 'RootFolder',
children: [
{
name: 'OS',
children: false
},
{
name: 'Games',
children: [{name: 'LOL', children: false}, {name: 'TANKS', children: false},]
},
{
name: 'Works',
children: false
},
{
name: 'Files',
children: false
}
]
}
}
})
</script>
</div>
</body>
</html>
运行效果图：
