有没有大佬能讲一下父子组件传值使用的方法么?
萌新,看了一些学习文档,不太明白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: '我来自父级'
}
如图:
至此,父向子组件传值、子向父组件传值,双方均已打通。
(第一次在社区编辑器中写代码,献丑了。)