今天就跟大家聊聊有关如何在Vue中使用组件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
//1、创建组件构造器
let overallDiv=Vue.extend({
template:`
<div>
<p>这是一个全局组件div</p>
</div>
`
});
//2、注册全局组件
Vue.component('overall-div',overallDiv);
//3、实例化,组件只有在实例化的div内才能使用,不可以直接在页面中使用
let vue=new Vue({
el:'#app',
data:{},
//在实例内注册局部组件,其创建与注册可以合为一步来写
components:{
'local-div':{
template:
` <div>
<p>这是一个局部组件div</p>
</div>
`
}
},
methods:{
}
});
在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 >
<h4>这是插槽头部</h4>
<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>
<h4>实名插槽头部</h4>
<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>
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
看完上述内容,你们对如何在Vue中使用组件有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。