小程序
小游戏
企业微信
微信支付
扫描小程序码分享
萌新,看了一些学习文档,不太明白triggerevent到底是怎么用的,有没有大佬能详细的讲一下父子组件到底是怎么传值的?
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
子组件:
----wxml: <view bindtap="handleClick">点我呀!</view> ----js: handleClick(){ const object ={name:'我来自子组件'} this.triggerEvent('myeventData', object) }
父组件:
第一处修改:
在xxx.json中的usingComponents中设置要用到的子组件,例如: { "usingComponents": { "componentA": "/components/子组件目录/子组件文件名" }, "navigationBarTitleText": "页面标题自己改" }
第二处修改:
在xxx.wxml中引入刚设置好的组件,例如: <componentA bind:myeventData="getChildrenData"></componentA>
第三处:
在xxx.js中添加getChildrenData方法获取子组件的值,例如: getChildrenData(event){ console.log('父组件中接收子组件的数据为', event.detail) } 打印的结果为: 父组件中接收子组件的数据为 {name: "我来自子组件"}
效果如图:
至此,一个简单的父子组件传值演示完毕,说严谨点儿是:父组件获取到了子组件的值。
----下面是父向子组件传递值,即:子组件要接收父传过来的值。
子修改如下:
properties: { parentData: { type: String } // 父传入的数据 }, handleClick(){ const object ={name:'我来自子组件'} this.triggerEvent('myeventData', object) console.log('在子组件中打印父的数据',this.data.parentData) }
父组件中修改如下:
在xxx.wxml中引入刚设置好的组件,例如: <componentA bind:myeventData="getChildrenData" parentData="parentData"></componentA>
注意这里多了一个
parentData="parentData"
设置什么内容,要在父的js中进行添加,比如:
修改父的xxx.js,比如: data:{ parentData: '我来自父级' }
如图:
至此,父向子组件传值、子向父组件传值,双方均已打通。
(第一次在社区编辑器中写代码,献丑了。)
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
const app = getApp() // 引入逻辑文件
// 然后刚才的方法中也添加一行代码,或者直接在子组件加载时打印也是一样。
handleClick(){
const object ={name:'我来自子组件'}
this.triggerEvent('myeventData', object) // 子组件向父传递数据
console.log('在子组件中打印父的数据',this.data.parentData)
console.log('获取app.js中的参数',app.globalData)
}
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
子组件:
----wxml: <view bindtap="handleClick">点我呀!</view> ----js: handleClick(){ const object ={name:'我来自子组件'} this.triggerEvent('myeventData', object) }
父组件:
第一处修改:
在xxx.json中的usingComponents中设置要用到的子组件,例如: { "usingComponents": { "componentA": "/components/子组件目录/子组件文件名" }, "navigationBarTitleText": "页面标题自己改" }
第二处修改:
在xxx.wxml中引入刚设置好的组件,例如: <componentA bind:myeventData="getChildrenData"></componentA>
第三处:
在xxx.js中添加getChildrenData方法获取子组件的值,例如: getChildrenData(event){ console.log('父组件中接收子组件的数据为', event.detail) } 打印的结果为: 父组件中接收子组件的数据为 {name: "我来自子组件"}
效果如图:
至此,一个简单的父子组件传值演示完毕,说严谨点儿是:父组件获取到了子组件的值。
----下面是父向子组件传递值,即:子组件要接收父传过来的值。
子修改如下:
properties: { parentData: { type: String } // 父传入的数据 }, handleClick(){ const object ={name:'我来自子组件'} this.triggerEvent('myeventData', object) console.log('在子组件中打印父的数据',this.data.parentData) }
父组件中修改如下:
在xxx.wxml中引入刚设置好的组件,例如: <componentA bind:myeventData="getChildrenData" parentData="parentData"></componentA>
注意这里多了一个
parentData="parentData"
设置什么内容,要在父的js中进行添加,比如:
修改父的xxx.js,比如: data:{ parentData: '我来自父级' }
如图:
至此,父向子组件传值、子向父组件传值,双方均已打通。
(第一次在社区编辑器中写代码,献丑了。)
继续修改刚提到的子组件,最上方添加一行代码:
效果如图:
const app = getApp() // 引入逻辑文件
// 然后刚才的方法中也添加一行代码,或者直接在子组件加载时打印也是一样。
handleClick(){
const object ={name:'我来自子组件'}
this.triggerEvent('myeventData', object) // 子组件向父传递数据
console.log('在子组件中打印父的数据',this.data.parentData)
console.log('获取app.js中的参数',app.globalData)
}