组件之间循环引用

以下用全局注册方式展示一下组件的循环引用例子。

注意：例子中的 "父组件" 和 "子组件" 是为了便于区分两个组件，其实这两个组件互为 祖先和后代的关系，因为他们互相循环引用，不是简单的 父子关系

<div id="div">		
      <!--用prop 获取实例data数据-->
	 <father-comp :children="folder"></father-comp>
</div>

// 创建子组件 child-comp，因为该子组件在父组件father-comp 中，绑定prop获得了数据，所以可以直接调用数据
// 模板插入父组件 father-comp ，并绑定prop，:children="folder.children， 把 子组件的prop 值的下级传入父组件的prop。
// 因为子组件绑定了prop ，就是用子组件的prop获取了data数据。所以父组件可以通过绑定自己的prop 和子组件的prop的.children,
// 获取下一级的数据

Vue.component("child-comp",{
	template:`
      <p>
		  <span>{{folder.name}}</span>
		  <father-comp :children="folder.children"/>
	  </p>`,
	props:['folder']
})

//创建父组件 father-comp，遍历数据 child in children，获得children
//模板插入子组件 child-comp，通过这个子组件绑定prop 到父组件的prop，把数据的下一级传入子组件

Vue.component("father-comp",{
	template:`
		<ul>
		 <li v-for="child in children">
			<child-comp v-if="child.children" :folder="child"></child-comp>
			<span v-else>{{child.name}}</span>
			</li>
		</ul>`,
	props:['children']
})

new Vue({
	el:"#div",
	data: {
		folder: [
			{name: 1},
			{name: 2,
			 children:[{
				 name:"2-1",
				 children:[{
				 name:"2-1-1"},
			    {name:"2-1-2"
				 }]
			 		}]
			}
		]
	}
	})