【愚公系列】2022年10月 微信小程序-优购电商项目-⾃定义组件传参
文章目录
- 前言
- 一、id和data-xxx传参
- 二、导航传值
- 三、父子组件传值
前言
组件传参是小程序中非常重要的一个功能，因为小程序大多都是组件形式存在的。
一、id和data-xxx传参
view class="container"><view class="usermotto"><!-- 传入普通字符串数值 --><button class="user-motto" bindtap="onGetIdValue" id="winne" data-name="name">小程序通过id传值</button></view>
</view>
Page({ //事件处理函数onGetIdValue (e) {// currentTarget:事件绑定的当前组件console.log(e.currentTarget.id) console.log(e.currentTarget.dataset.name)}
})
二、导航传值
onJumpToLogisticsDetail(e) {// target:触发事件的源组件let orderid = 110110110let num = 120120120wx.navigateTo({url: `/pages/logisticsDetail/logisticsDetail?orderId=${orderid}&num=${num}`})}
}
//logisticsDetail.js
onLoad: function (options) {console.log(options)
}
三、父子组件传值
⽗组件 把数据 {{tabs}} 传递到 ⼦组件的 tabItems 属性中
⽗组件 监听 onMyTab 事件
⼦组件 触发 bindmytap 中的 mytap 事件
- ⾃定义组件触发事件时，需要使⽤ triggerEvent ⽅法，指定 事件名 、 detail 对象
⽗ -> ⼦ 动态传值 this.selectComponent(“#tabs”);
// page.wxml
<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >内容-这里可以放插槽
</tabs>
// page.jsdata: {tabs:[{name:"体验问题"},{name:"商品、商家投诉"}]},onMyTab(e){console.log(e.detail);},
// com.wxml
<view class="tabs"><view class="tab_title" ><block wx:for="{{tabItems}}" wx:key="{{item}}"><view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view></block></view><view class="tab_content"><slot></slot></view>
</view>
// com.js
Component({properties: {tabItems:{type:Array,value:[]}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {handleItemActive(e){this.triggerEvent('mytap','haha');}}
})【愚公系列】2022年10月 微信小程序-优购电商项目-⾃定义组件传参相关推荐
- 【愚公系列】2022年10月 微信小程序-优购电商项目-商品分类
文章目录 前言 一.商品分类 1.业务逻辑 2.涉及的接口数据 3. 关键技术 二.商品分类代码 1.相关代码 2.效果 前言 商品分类是指根据一定的管理目的,为满足商品生产.流通.消费活动的全部或部 ...
- 【愚公系列】2022年10月 微信小程序-优购电商项目-小程序模板语法
文章目录 前言 一.数据绑定 1. 普通写法 2. 组件属性 3. bool类型 二.运算 1. 三元运算 2. 算数运算 3. 逻辑判断 4. 字符串运算 5. 注意 三.列表渲染 1. wx:fo ...
- 【愚公系列】2022年11月 微信小程序-优购电商项目-授权页面
文章目录 前言 1. 授权页面 一.授权页面 1.业务逻辑 2.涉及的接口数据 二.授权页面相关代码 1.页面代码 2.效果 前言 前言:由于微信官方修改了 getUserInfo 接口,所以现在无法 ...
- 【愚公系列】2022年11月 微信小程序-优购电商项目-首页设计
文章目录 前言 一.首页设计 1.首页的业务逻辑 2.涉及的接口数据 3.关键技术 二.首页相关代码 1.⾃定义组件搜索框 2.wx.request封装 3.首页页面 4.效果 前言 对于小程序电商首 ...
- 【愚公系列】2022年11月 微信小程序-优购电商项目-商品收藏⻚⾯
文章目录 前言 一.商品收藏⻚⾯ 1.业务逻辑 2. 关键技术 二.商品收藏⻚⾯代码 1.页面代码 2.效果 前言 商品收藏其实是可以衡量商品好坏和受欢迎程度的一个标准,根据标准可以设置商品权重. 商 ...
- 【愚公系列】2022年11月 微信小程序-优购电商项目-商品支付页面
文章目录 前言 1. 商品⽀付页面设计规范 一.商品支付页面 1.业务逻辑 2.涉及的接口数据 3. 关键技术 二.商品购物车页面相关代码 1.页面代码 2.效果 前言 1. 商品⽀付页面设计规范 第 ...
- 【愚公系列】2022年11月 微信小程序-优购电商项目-商品详情页面
文章目录 前言 一.商品详情⻚⾯ 1.业务逻辑 2.涉及的接口数据 3. 关键技术 二.商品详情⻚⾯相关代码 1.页面代码 2.效果 前言 商品详情页是展示商品详细信息的一个页面,承载在网站的大部分流 ...
- 【愚公系列】2022年11月 微信小程序-优购电商项目-意见反馈页面
文章目录 前言 一.意见反馈页面 1. 业务逻辑 2. 关键技术 二.意见反馈页面代码 1.图片上传组件 2.页面代码 3.效果 前言 对于需要收集产品上线后用户实际使用感受的,意见反馈绝对是一个很好 ...
- 【愚公系列】2022年10月 微信小程序-电商项目-微信支付后端功能实现（node版）
文章目录 前言 一.微信支付后端功能实现(node版) 1.相关文档 2.项目配置 前言 微信支付是腾讯集团旗下的第三方支付平台,致力于为用户和企业提供安全.便捷.专业的在线支付服务.以"微 ...
最新文章
- Django内置Admin
- 基于OpenCV实战的图像处理：色度分割
- 阿里巴巴为什么让初始化集合时必须指定大小？
- 成为你向往的那只独角兽——《独角兽项目》出版在即
- （原）vs2013编译boost1.60库
- SQLServer查询最近一天，三天，一周，一月，一季度方法
- 学习《Python核心编程》做一下知识点提要，方便复习（二）
- centos(7.0) 上 crontab 计划任务
- 人脸方向学习（七）：Face Recognition-CosFace 解读
- access窗体主体居中
- 新手指南： 手把手教你安装 Ubuntu 和 Fedora
- php 登陆代码,php登陆代码_php实现简单用户登录功能程序代码
- Creo6.0无人机建模与结构设计视频教程
- IOCCC.1987.korn.c.解析
- 微信小程序——计算从今天到某天间隔多少天
- 重新学javaweb---cookiesession
- FID(Fusion-in-Decoder models)源码笔记
- onedrive php映射,Microsoft OneDrive空全局账号自建API(Rclone、OneManager-php)
- 分享一个无需账号完全免费的 ChatGPT-4 的方法
- Win10将某个软件/文件添加到开始屏幕（磁贴）