有没有大佬能讲一下父子组件传值使用的方法么?
发布于 6 年前 作者 mengyang 6105 次浏览 来自 问答

萌新,看了一些学习文档,不太明白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: '我来自父级'
}

如图:

至此,父向子组件传值、子向父组件传值,双方均已打通。

(第一次在社区编辑器中写代码,献丑了。)

回到顶部