微信小程序父子组件传值点击传值

最新推荐文章于 2024-06-22 01:11:25 发布

周18

最新推荐文章于 2024-06-22 01:11:25 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_35736512/article/details/107981449

微信小程序专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了小程序中父子组件之间的通信方式，包括子组件通过事件触发向父组件传递数据，父组件向子组件传值，以及父组件点击后传值给子组件的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天把印象笔记里的笔记整理上来了一下，可能会漏点字母什么的
1.子组件传给父组件需事件/方法触发

// 子组件
childFunc(e){
this.triggerEvent('childData', { childId: this.data.childId})
}

//父组件
html:
<childDemo  bind:childData='childData' ></childDemo>
js:
childData(e){
const { childId} = e.detail
}

2.父组件给子组件传值

//父组件
html:
<childDemo  parentData='parentData' ></childDemo>
js:
data:{
parentData: ‘zff’
}

子组件
properties: {
parentData: {
type: 'String',
value: ''
}
},
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
ready: function () {
//执行获取this.data.parentData方法
}
},

3.父组件点击后传给子组件值

父组件
parentTap(){
var childDemo = that.selectComponent("#childDemo");
childDemo.sendParentData(//要传的值);
}
子组件接收
sendParentData: function (data){
console.log(data)
}