时间:2021-05-26
本文实例讲述了Vue学习之组件用法。分享给大家供大家参考,具体如下:
Vue中的模块化、可重用代码块将页面细分为一个个功能组件,而且组件之间可以嵌套。组件分为全局组件与局部组件,局部组件在实例中进行注册,并且只可以应用于该实例中。
在HTML页面实例化的div中使用组件:
<div id="app"> <local-div></local-div> <overall-div></overall-div> </div>注意:一些HTML标签对放入其中的标签有限制,这时需要通过is属性将组件转化为你要放入的组件,例如<ul>标签下只能放<li>,这时,你可以使用<li is="my-component">,这样就相当于放入了<my-component>标签。
组件的模板除了在js中创建外,还可以使用页面中的template创建模板,注意页面中的模板只能有一个根元素,如有多个元素需要包含在一个div内,例如页面body中的模板:
<template id="myTmp"> <div> <p>这是页面中的模板</p> </div> </template>在js中通过id号注册模板。
Vue.component('my-tmp',{ template:'#myTmp' });在组件中使用data必须以函数的形式返回,如果以属性值的形式存在,所有的组件会共享一个属性值,更改其中一个,所有的组件都会收到影响。例如一个统计被点击次数的组件:
<template id="myBtn"> <div> <button @click="count++">按钮被点击{{count}}次</button> </div> </template> Vue.component('my-btn',{ template:'#myBtn', data () { //以函数返回的方式定义组件使用的data return { count:0 }; } }); <div id="app"> <my-btn></my-btn> <my-btn></my-btn> </div>在页面中分别点击两个按钮,两个按钮组件的count分别计数,不会互相干扰:
先创建子组件,然后再父组件内进行注册,就可以在父组件的模板内使用子组件,然后再注册父组件,这样就可以在外部调用包含子组件的父组件了,外部直接使用父组件接口,而不需要知道内部子组件的实现
注意在外部不能直接使用子组件,因为它只在父组件内进行了注册,外部看不到子组件
let child1=Vue.extend({ template:`<div>这是子组件1</div>` }); let child2=Vue.extend({ template:`<div>这是子组件2</div>` }); Vue.component('parent',{ components:{ 'c1':child1, 'c2':child2 }, //在父组件内调用子组件 template:`<div>父组件<c1></c1><c2></c2></div>` }); <div id="app"> <parent></parent> </div>结果如图:
像生活中的容器一样,slot允许向其中插入标签、组件等内容,而在外部提供一个框子包装起来。slot分为匿名插槽与实名插槽,匿名插槽可以向其中插入任何类型的内容。
实名slot可以将内容插入指定的插槽内,就像一台电脑的主板,cpu、内存条分别有自己对应的插槽,实名插槽在模板中通过name属性规定插槽的名字,在使用时,通过标签的slot属性指定对应的name,可以将标签插入指定的插槽。
匿名插槽
<!--匿名插槽--> <template id="anonymousDiv"> <div style="width: 20%;"> <h3>这是插槽头部</h3> <slot>插槽默认显示内容</slot> <hr/> <p>插槽尾部</p> </div> </template> let vue2=new Vue({ el:'#app2', data:{ }, components:{ //绑定匿名插槽 'anonymous-slot':{ template:'#anonymousDiv' }, //绑定实名插槽 'realname-slot':{ template:'#realnameDiv' } } });向cpu插槽内插入内容:
<div id="app2"> <anonymous-slot> <p>向插槽中插入一段文字</p> </anonymous-slot> </div>插槽未放入内容时:插入一段文字:
实名插槽
<template id="realnameDiv"><div> <h3>实名插槽头部</h3> <slot name="cpu">这是cpu插槽</slot> <slot name="memery">这是内存条插槽</slot> <slot name="HardDisk">这是硬盘插槽</slot></div></template><realname-slot> <p slot="cpu">Intel Core i5</p></realname-slot>结果:cpu放入指定插槽,而其他插槽未受影响:
希望本文所述对大家vue.js程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了vue学习笔记之slot插槽基本用法。分享给大家供大家参考,具体如下:不使用插槽,在template中用v-html解析父组件传来的带有标签的co
Vueprops用法详解组件接受的选项之一props是Vue中非常重要的一个选项。父子组件的关系可以总结为:propsdown,eventsup父组件通过pro
Vue.extend构造器的详解1.简单介绍Vue.extend(options)参数:对象用法:使用Vue构造器,创建一个“子类”,参数是一个包含组件选项的对
本文介绍了详解vue模版组件的三种用法,分享给大家,具体如下:第一种//首先,别忘了引入vue.jsvarUser_01=Vue.extend({//创建可复用
本文实例讲述了Node.jsAPI详解之zlib模块用法。分享给大家供大家参考,具体如下:Node.jsAPI详解之zlibzlib模块提供通过Gzip和Def