小程序父子组件间传值（微信/支付宝/钉钉）

以传递一个简单的count值为例，实现父子组件的双向绑定，无论是点击父组件按钮还是子组件按钮，count值都自增

微信小程序

父传子

<component count="{{count}}"/>

properties:{count:Number
}

简单的将父组件在data中定义的属性，赋给子组件定义在properties中的属性即可
通过在父组件中设置一个按钮，使count自增，子组件的count属性也会随之自增
达到点击父组件按钮，父组件子组件count值一同加一的效果

子传父

原理是将父组件的函数传递给子组件，子组件的事件可以触发父组件函数，进而传参

<component count="{{count}}" bind:myevent="syncCount"/>

意即在父组件中定义了"syncCount"方法，子组件可以通过"myevent"作为关键字，访问到这个方法

<button bindtap="btn_click"/>

methods:{btn_click:function(){var myEventDetail = {} // detail对象，提供给事件监听函数var myEventOption = {} // 触发事件的选项this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}

在子组件中放置一个按钮，在它的点击事件中，可以使用triggerEvent方法触发父组件函数，并通过myEventDetail参数来传递需要的信息，本例中，我们可以什么都不传，只需要通知父组件让count值自增即可，因为第一步已经实现了父传子，所以父组件收到消息，调用函数，count自增，子组件的count值就会同步变化
达到点击子组件按钮，父组件子组件count值一同加一的效果

  syncCount:function(e){this.setData({count:this.data.count+1})}

支付宝小程序

父传子

<component count="{{count}}"/>

props:{count:Number
}

简单的将父组件在data中定义的属性，赋给子组件定义在props中的属性即可
通过在父组件中设置一个按钮，使count自增，子组件的count属性也会随之自增
达到点击父组件按钮，父组件子组件count值一同加一的效果

子传父

原理是将父组件的函数传递给子组件，子组件的事件函数可以直接调用父组件函数，进而传参

<component count="{{count}}" onChange="countAdd"/>

意即在父组件中定义了"countAdd"方法，传递给了子组件props中的onChange，注意这里的命名必须使用on开头，不然会被识别为字符串

props: {count:Number,onChange:(data)=>console.log(data)},

如此定义是为了，如果父组件不传onChange，onChange有个默认的方法

<button onTap="btn_click" /button>

 methods: {btn_click:function(){this.props.onChange();}}

在子组件中放置一个按钮，在它的点击事件中调用父组件的countAdd方法（与onChange绑定了），这里我们可以不传参，在父组件中使count值自增，因为之前已经实现了父传子，子组件的count值就也会随之自增（如果需要传参，给countAdd方法加形参即可）
达到点击子组件按钮，父组件子组件count值一同加一的效果

 countAdd(){this.setData({count:this.data.count+1})}

微信和支付宝小程序在data和props方面的区别

微信小程序的data和properties是同一个对象，也就是说
我们既可以通过父组件的值变化来操作properties中的属性，也可以通过子组件的setData方法更改properties中的属性
而支付宝小程序的data和props是两个不同的对象，props只能由父组件来更改，无法在子组件中进行操作
因此，在微信小程序中实现count值的双向绑定，在实现子传父时，也可以这么写

methods:{btn_click:function(){this.setData({count:this.properties.count+1});this.triggerEvent("myevent",{value:this.properties.count});
}
}

我们先让子组件的count值加一，再将这个值回传给父组件，直接赋值给父组件的count
之前的方法是子组件通知父组件，父组件更改值，子组件随之改变
这种方式是子组件先更改自己，再直接将父组件的值更改

  syncCount:function(e){this.setData({count:e.detail.value})}

在写支付宝小程序时是无法使用这种方式的，因为子组件不允许修改props中的属性

比较推荐的做法也是不要让直接让子组件修改properties中的属性，交给父组件来做更好，这里只是记录一下