微信小程序子组件向父组件传值的两种方法
作者：九亿少女无法触及的梦ى
本文介绍了微信小程序中子组件向父组件传值的两种方法,这两种方法都能有效地实现子组件向父组件的数据传递,对于开发微信小程序的开发者来说,掌握这些技巧非常重要,感兴趣的朋友跟随小编一起看看吧
第一种方法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)
}
})到此这篇关于微信小程序子组件向父组件传值的两种方法的文章就介绍到这了,更多相关微信小程序子组件向父组件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！