以下用全局注册方式展示一下组件的循环引用例子。
注意:例子中的 "父组件" 和 "子组件" 是为了便于区分两个组件,其实这两个组件互为 祖先和后代的关系,因为他们互相循环引用,不是简单的 父子关系
<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" }] }] } ] } })
组件之间循环引用
猜你喜欢
转载自blog.csdn.net/weixin_41796631/article/details/83687632
今日推荐
周排行