Vue之自定义组件

最新推荐文章于 2025-10-27 08:19:10 发布

原创最新推荐文章于 2025-10-27 08:19:10 发布 · 440 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Vue.js创建自定义的商品优惠列表组件，包括组件的定义、数据绑定及在页面上的应用，展示了组件化的高效开发方式。

引言

在开发领域，我们经常会碰到列表这一类的业务，比如新闻列表，商品列表、活动列表等等。为了不重复造轮子，机智的我们总想把功能模块块，抽象出一个个的小组件，之后开发拿来即用。在这里，笔者想把商品优惠列表用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>