小程序篇 -- 父组件与子组件之间的传值

1、父组件传递给子组件值，首先在components 中新建一个testComponents子组件，代码如下：

testComponents.wxml

?

1 2 3

<view>    <text>{{value}}</text> </view>

testComponents.js

?

1 2 3 4 5 6 7 8 9 10 11 12

Component({   /**    * 组件的属性列表    */   properties: {     value:{       type:String, //指定传过来的值的类型       value:0 //默认值，假如没有值传过来，value就会显示默认值     }   },   })

2、接下来我们新建一个index父组件，对应代码如下：

index.json

?

1 2 3 4 5

{   "usingComponents": {     "testComponent":"../../components/testComponent/testComponent"   //子组件的路劲   } }

index.wxml

?

1 2 3

<view >   <testComponent value="张三"></testComponent> </view>

3、运行index父组件得到的效果图如下（假如value值没传，那么内容就会显示为默认值：0）：

4、子组件传递给父组件值，还是用上面的子组件，代码如下：

testComponent.wxml

?

1 2 3

<view>   <button bindtap="testClick">点击传递给父组件值</button> </view>

testComponent.js

?

1 2 3 4 5 6 7 8 9 10 11 12

Component({      /**    * 组件的方法列表    */   methods: {     testClick(){       //triggerEvent可以理解为vue中$emit       this.triggerEvent("myevent","张三")     }   } })

5、还是用上面的父组件，代码如下：

index.json

?

1 2 3 4 5

{   "usingComponents": {     "testComponent":"../../components/testComponent/testComponent"   } }

index.js

?

1 2 3 4 5 6 7 8 9 10 11

Page({   data:{     value:null   },   thismyevent(e){     // e.detail = 子组件传递过来的值     this.setData({       value:e.detail     })   } })

index.wxml

?

1 2 3 4

<view >   <testComponent bindmyevent="thismyevent"></testComponent>   <text style="display: flex;justify-content:center;">{{value}}</text> </view>

6、点击按钮得到子组件传递过来的张三，运行代码得到的效果图如下：