微信小程序子组件向父组件传值的两个方法

第一种方法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)}
})

微信小程序子组件向父组件传值的两个方法相关推荐

wepy组件子父传值_微信小程序wepy框架中父组件与子组件通信和交互
官网上描述: $broadcast$broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消.事件广播的顺序为广度优先搜索顺序.$emit$emit与$broadcast ...
微信小程序子组件使用canvas无效，线条画不出颜色
微信小程序子组件使用canvas无效,线条画不出颜色小程序中在page中直接使用canvas是这样使用的: // canvas 全局配置 var context = null; Page({data ...
微信小程序如何封装自己的组件？
在现在前端领域,最常见的话语就是组件化.工程化的内容.所有的框架都在朝着这方面发展.作为前端生态中的新兴热人物小程序的出现,同样支持组件化开发. 在我们的日常开发中,可以封装一些常用的组件达到复用效果 ...
微信小程序，自定义导航栏组件
微信小程序,自定义导航栏组件,可兼容iPhone 11及以上留海屏显示,关于参数获取设置参照微信小程序-收藏_羽筠的博客-CSDN博客可定义设置的内容如下: 文字及返回箭头颜色背景图片(优先级高于 ...
微信小程序简易搭建之框架/组件库
微信小程序简易搭建之框架/组件库 Vant weapp 下面看看如何导入 https://github.com/youzan/vant-weapp 使用教程: 1.下载后找到dist 2. 在你的项目 ...
微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
微信小程序 select 下拉框组件
一.源码地址 GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件二.效果图录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. ...
原生微信小程序，scroll-view的使用，一屏两个滚动区域，scroll-y（纵向滚动）
原生微信小程序,scroll-view的使用,一屏两个滚动区域,scroll-y(纵向滚动) 这个会简单很多结构层 <view class="container">& ...
微信支付服务商，![CDATA[sub_mch_id与sub_appid不匹配],微信小程序支付，签名错误，CDATA[签名错误]解决方法，支付签名验证失败
微信支付服务商,微信小程序支付,签名错误,CDATA[签名错误]解决方法 1:服务商和普通的商户支付在代码上没有太大差异(不同的是上传的参数,而且微信支付服务商参数上比较难找,官方文档又太简洁,所以很 ...

微信小程序子组件向父组件传值的两个方法

第一种方法triggerEvent() 方法

第二种方法

微信小程序子组件向父组件传值的两个方法相关推荐

最新文章

热门文章