Vue学习之组件用法实例详解
前端 / 管理员 发布于 5年前 534
本文实例讲述了Vue学习之组件用法。分享给大家供大家参考,具体如下:
Vue中的模块化、可重用代码块将页面细分为一个个功能组件,而且组件之间可以嵌套。组件分为全局组件与局部组件,局部组件在实例中进行注册,并且只可以应用于该实例中。
//1、创建组件构造器 let overallDiv=Vue.extend({ template:`这是一个全局组件div
` }); //2、注册全局组件 Vue.component('overall-div',overallDiv); //3、实例化,组件只有在实例化的div内才能使用,不可以直接在页面中使用 let vue=new Vue({ el:'#app', data:{}, //在实例内注册局部组件,其创建与注册可以合为一步来写 components:{ 'local-div':{ template: `这是一个局部组件div
` } }, methods:{ } });
在HTML页面实例化的div中使用组件:
注意:一些HTML标签对放入其中的标签有限制,这时需要通过is属性将组件转化为你要放入的组件,例如
组件的模板除了在js中创建外,还可以使用页面中的template创建模板,注意页面中的模板只能有一个根元素,如有多个元素需要包含在一个div内,例如页面body中的模板:
这是页面中的模板
在js中通过id号注册模板。
Vue.component('my-tmp',{ template:'#myTmp' });
在组件中使用data必须以函数的形式返回,如果以属性值的形式存在,所有的组件会共享一个属性值,更改其中一个,所有的组件都会收到影响。例如一个统计被点击次数的组件:
Vue.component('my-btn',{ template:'#myBtn', data () { //以函数返回的方式定义组件使用的data return { count:0 }; } });
在页面中分别点击两个按钮,两个按钮组件的count分别计数,不会互相干扰:
先创建子组件,然后再父组件内进行注册,就可以在父组件的模板内使用子组件,然后再注册父组件,这样就可以在外部调用包含子组件的父组件了,外部直接使用父组件接口,而不需要知道内部子组件的实现
注意在外部不能直接使用子组件,因为它只在父组件内进行了注册,外部看不到子组件
let child1=Vue.extend({ template:`这是子组件1` }); let child2=Vue.extend({ template:`这是子组件2` }); Vue.component('parent',{ components:{ 'c1':child1, 'c2':child2 }, //在父组件内调用子组件 template:`父组件` });
结果如图:
像生活中的容器一样,slot允许向其中插入标签、组件等内容,而在外部提供一个框子包装起来。slot分为匿名插槽与实名插槽,匿名插槽可以向其中插入任何类型的内容。
实名slot可以将内容插入指定的插槽内,就像一台电脑的主板,cpu、内存条分别有自己对应的插槽,实名插槽在模板中通过name属性规定插槽的名字,在使用时,通过标签的slot属性指定对应的name,可以将标签插入指定的插槽。
匿名插槽
let vue2=new Vue({ el:'#app2', data:{ }, components:{ //绑定匿名插槽 'anonymous-slot':{ template:'#anonymousDiv' }, //绑定实名插槽 'realname-slot':{ template:'#realnameDiv' } } });这是插槽头部
插槽默认显示内容
插槽尾部
向cpu插槽内插入内容:
向插槽中插入一段文字
插槽未放入内容时:插入一段文字:
实名插槽
实名插槽头部
这是cpu插槽 这是内存条插槽 这是硬盘插槽 Intel Core i5
结果:cpu放入指定插槽,而其他插槽未受影响:
希望本文所述对大家vue.js程序设计有所帮助。
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号