<!@R_419_5099@ HTML><HTML><head> <Meta charset='UTF-8'> <Meta name='vIEwport' content='wIDth=device-wIDth,initial-scale=1.0'> <Meta http-equiv='X-UA-Compatible' content='IE=edge'> <Title>document</Title></head><body> <div ID='app'> <child-a></child-a> <child-b></child-b> <!-- 这个位置是组件的视图内容<-选项template --> ----------com-a-------------------- <com-a></com-a> ----------child-c--------------------- <child-c></child-c> ----------parent-a--------------------- <parent-a></parent-a> </div> <script src='./vue.Js'></script> <script> Vue.component("child-a",{ template: `<div>我是child-a组件</div>` }); Vue.component("child-b",{ template: `<div>我是child-b组件</div>` }); // 全局组件的使用位置: 可以在后面的任意视图模板中使用 // 此时,child-a和child-b是parent-a的子组件 Vue.component("parent-a",{ template: `<div>我是parent-a组件---- <child-a></child-a> <child-b></child-b> <child-c></child-c> </div>` }); Vue.component('child-c',{ template: `<div>我是child-c组件</div>` }) new Vue({ el: '#app',data: { },components: { // 全局组件child-b是com-a的子组件 // 问题: // 一个组件是父还是子 与 该组件是全局还是局部 没关系 // 一个组件是父还是子与该组件的使用位置 "com-a": { template: `<div> <child-b></child-b> </div>` } },methods: {} }); </script></body></HTML> 总结 以上是内存溢出为你收集整理的02-基础-组件-组件嵌套全部内容，希望文章能够帮你解决02-基础-组件-组件嵌套所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）