微信小程序子组件向父组件传值的两个方法
2020-03-29 12:35
369 查看
第一种方法triggerEvent() 方法
triggerEvent方法用法类似于Vue中的emit()
// list.wxml 组件 <view> <block wx:for="{{data}}" wx:key="*this"> <view class="box-list"> <view class="title">{{item.title}}</view> <view class="content"> <view>{{item.content}}</view> <view class="btn"> <button type="primary" size="mini" bindtap="handleTap" data-index="{{index}}">传值</button> </view> </view> </view> </block> </view>
// list 组件 js Component({ // 从父组件接收的data 会自动同步到 子组件的data 对象里面 properties: { data: { type: Array, value: [] } }, methods: { handleTap(e) { let { index } = e.currentTarget.dataset; let data = this.data.data; // 自定义一个事件,并且传值 this.triggerEvent('myevent',{params: data[index]},{}) }, } })
home.wxml 父组件
<view> <list bindmyevent="myevent" data="{{list}}" class="list"></list> </view> Page({ data: { list:[{ title: '薛之谦', content: '《演员》《你还要我怎样》' },{ title: '第二梦', content: '《风云1》《风云2》' }] }, myevent(e) { // 这里就是子组件传过来的内容了 console.log(e.detail.params) } })
第二种方法
页面布局和上面是一样的
.list 是子组件的class 名
// home.js 父组件的js Page({ onShow() { const instance = this.selectComponent('.list'); // 打印出来的就是list 组件的实例了,这样就可以获取到子组件所有的数据了! // 注意!这里也可以调用setData 等方法直接修改组件的值 console.log(instance) } })
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 微信小程序开发—快速掌握组件及API的方法
- 微信小程序下拉框组件使用方法
- 微信小程序日历组件使用方法详解
- 微信小程序Echarts图表组件使用方法详解
- 微信小程序开发—快速掌握组件及API的方法---转载
- 微信小程序开发—快速掌握组件及API的方法
- Extjs4.x中,每个组件都新增加了两个方法up()和down()方法
- 微信小程序:父组件执行子组件的方法
- 解决微信扫码下载的两个方法
- 微信小程序非跳转式组件授权登录的方法示例
- 微信小程序——父子组件传参以及方法的调用
- elementUI 使用input等组件,change事件想传两个(或以上)参数(一个默认的value,一个自定义的value)的方法
- 微信小程序使用Vant Weapp组件库的方法步骤
- button组件、 onShareAppMessage 方法实现 —— 自定义传参 —— 微信小程序
- 微信小程序引入VANT组件的方法步骤
- 微信小程序 请求的两个方法
- 微信小程序基于slider组件动态修改标签透明度的方法示例
- 微信小程序实现image组件图片自适应宽度比例显示的方法
- 微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
- 微信小程序自定义组件封装及父子间组件传值的方法