引言
在开发领域,我们经常会碰到列表这一类的业务,比如新闻列表,商品列表、活动列表等等。为了不重复造轮子,机智的我们总想把功能模块块,抽象出一个个的小组件,之后开发拿来即用。在这里,笔者想把商品优惠列表用vue做一个自定义组件,如下图所示。
Vue自定义组件
关键点1:组件名称,字符串形式,这里笔者为自己的组件取名为“more-list”
关键点2:如果组件中需要使用外部变量,则先通过props属性声明
关键点3:组件内容通过template声明,组件的内容必须由一个父标签包裹着(单标签的形式除外)
案例源码
Vue.component('more-list',{
props:['title','pict_url','zk_price','coupon_amount','quanhou','volume'],
template:`
<div class="baobei">
<img class="baobei-img" :src="pict_url" align="left">
<div class="baobei-rigth">
<div class="baobei-title">
{{title}}
</div>
<div class="baobei-middle">
<span class="baobei-middle-left">天猫</span>
<span class="baobei-middle-xiaoliang">销量{{volume}}</span>
<span class="baobei-middle-rigth">{{coupon_amount}}元券</span>
</div>
<div class="baobei-bottom">
<span class="baobei-bottom-left">
原价¥<span class="bottom-left-big">{{zk_price}}</span>
</span>
<span class="baobei-bottom-right">
券后¥<span class="bottom-rigth-big">{{quanhou}}</span>
</span>
</div>
</div>
</div>
`
});
声明Vue对象
关键点1:必须说明组件的作用域,可以用id的形式或class的形式
关键点2:如果需要给组件传参,则可以通过data属性声明
案例源码
var vue = new Vue({
el:'.content-list',
data:{
result:[]
}
});
使用组件
关键点1:组件必须在声明的作用域内
关键点2:可以通过绑定变量的形式给组件传参
案例源码
<div class="content-list">
<!--自定义组件-->
<more-list v-for="value in result"
:title = value.title
:pict_url = value.pict_url
:zk_price=value.zk_price
:coupon_amount=value.coupon_amount
:quanhou=value.quanhou
:volume=value.volume
>
</more-list>
</div>