uni-app组件的封装——父子组件之间事件的传递

组件封装：
1、属性：props
2、样式：computed
3、事件：
（1）若多次调用组件事件代码一致，且没有对父组件传递过来的数据进行修改的情况。将事件统一书写在组件内部。
（2）若多次调用组件事件代码不一致，或对父组件传递过来的数据需要修改。使用自定义事件： $emit(“事件名”，参数);

例：电子商城商品详情页中单击不同的购买选项弹出不同的弹窗

pages页面中的代码

<template>
	<!-- 购买选项 -->
	<view>
		<view @tap="popupShow('car')"></view>
		<view @tap="popupShow('address')"></view>
		<view @tap="popupShow('service')"></view>
	</view>
	
	<!-- 底部弹窗 | 加入购物车 -->
	<popup :classname="popupClassName.car" 
		btnText="加入购物车" 
		@popupHide="popupHide('car')" 
		@btnTap="joinCar">
	</popup>
	
	<!-- 底部弹窗 | 收获地址 -->
	<popup :classname="popupClassName.address" 
		btnText="选择新地址" 
		@popupHide="popupHide('address')" 
		@btnTap="selectNewAddress">
	</popup>
	
	<!-- 底部弹窗 | 服务说明 -->
	<popup :classname="popupClassName.service" 
		btnText="确定" 
		@popupHide="popupHide('service')" 
		@btnTap="serviceBtnTap">
	</popup>
</template>

<script>
	import popup from '@/components/popup.vue';	
	export default {
		components:{
			popup
		},
		data() {
			return {
				popupClassName:{
					car:'none',
					address:'none',
					service:'none'
				}
			}
		},
		methods: {
			// 弹窗显示
			popupShow(key){
				this.popupClassName[key]='show';
			},
			// 弹窗隐藏
			popupHide(key){
				this.popupClassName[key]='hide';
				setTimeout(()=>{
					this.popupClassName[key]='none';
				},300)
			},
			// 弹窗中加入购物车按钮事件
			joinCar(){
				this.popupHide('car');
				console.log('实现触碰加入购物车按钮的功能');
			},
			// 弹窗中选择新地址按钮事件
			selectNewAddress(){
				this.popupHide('address');
				console.log('实现触碰选择新地址按钮的功能');
			},
			// 弹窗中服务说明确定按钮
			serviceBtnTap(){
				this.popupHide('service');
				console.log('实现触碰确定按钮的功能');
			}
		},
		// 生命周期函数---监听页面返回
		onBackPress(){
			// 当弹窗出现时，触碰标题栏的返回按钮弹窗隐藏，并在当前页面
			for(let key in this.popupClassName){
				if(this.popupClassName[key]==='show'){
					this.popupHide(key);
					return true;
				}
			}
		}
	}
</script>

组件中的代码

<template>
	<view class="_popup" :class="classname">
		<view class="mask" @tap.self="$emit('popupHide')">
			<view class="content">
				<slot />
				<view @tap="$emit('btnTap')" class="bottomButton">{{btnText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 底部弹窗组件	
	export default {
		props:{
			classname:String,
			btnText:String
		},
		data() {
			return {
							
			}			
		}
	}
</script>

<style>
	._popup{
		width:100vw;height: 100vh;
		position:fixed;
		left:0;top:0;
	}
	.mask{
		width:100%;height: 100%;
		background-color: rgba(0,0,0,0.7);
	}
	.content{
		width:100%;height: 1030upx;
		background-color: #fff;
		position: absolute;
		bottom:0;left:0;
		padding:25upx;	
		border-radius: 20upx;
	}
	.bottomButton{
		width:100%;height: 100upx;
		background-color: #F0AD4E;
		color:#fff;
		position: fixed;
		bottom: 0;left:0
		text-align: center;
		line-height: 100upx;
	}
	.none{
		display: none;
	}
	@keyframes maskHide{
		from{opacity: 1;}
		to{opacity: 0;}
	}
	@keyframes maskContentHide{
		from{height:1030upx;}
		to{height:0;}
	}
	@keyframes maskShow{
		from{opacity: 0;}
		to{opacity: 1;}
	}
	@keyframes maskContentShow{
		from{height: 0;}
		to{height: 1030upx;}
	}
	._popup.hide .mask{
		animation:maskHide 0.3s linear both;
	}
	._popup.hide .content{
		animation:maskContentHide 0.3s linear both;
	}
	._popup.show{
		display: block;
	}
	._popup.show .mask{
		animation:maskShow 0.3s linear;
	}	
	._popup.show .content{
		animation:maskContentShow 0.3s linear;
	}
</style>