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

最新推荐文章于 2024-06-27 17:01:07 发布

World_Mei

最新推荐文章于 2024-06-27 17:01:07 发布

阅读量3.5k

点赞数 1

分类专栏： uni-app Vue

本文链接：https://blog.csdn.net/World_Mei/article/details/105847761

版权

本文介绍了在uni-app中如何进行组件封装，包括props属性、computed样式的使用，并详细阐述了父子组件间事件传递的两种情况：统一书写在组件内部的事件和使用$emit触发的自定义事件。通过一个电子商城商品详情页中弹窗的例子，展示了不同购买选项如何触发不同的弹窗。

摘要由CSDN通过智能技术生成

组件封装：
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