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