小程序----父子组件之间的三种通信方式

小程序----父子组件之间的三种通信方式

小程序----父子组件之间的三种通信方式_第1张图片

1.属性绑定 父组件->子组件

小程序----父子组件之间的三种通信方式_第2张图片
小程序----父子组件之间的三种通信方式_第3张图片

2.事件绑定 子组件->父组件

小程序----父子组件之间的三种通信方式_第4张图片
小程序----父子组件之间的三种通信方式_第5张图片
小程序----父子组件之间的三种通信方式_第6张图片
小程序----父子组件之间的三种通信方式_第7张图片
自己动手过程
小程序----父子组件之间的三种通信方式_第8张图片
结合了第一步的属性绑定
小程序----父子组件之间的三种通信方式_第9张图片
小程序----父子组件之间的三种通信方式_第10张图片
小程序----父子组件之间的三种通信方式_第11张图片
在子组件的wxml中也要做设置
小程序----父子组件之间的三种通信方式_第12张图片
属性绑定结束,在面开始事件绑定,由子组件—>>>父组件
要先对子组件设置一个事件,
小程序----父子组件之间的三种通信方式_第13张图片
小程序----父子组件之间的三种通信方式_第14张图片
此时,子组件中可正常进行+1按钮
小程序----父子组件之间的三种通信方式_第15张图片
开始配合父组件
在父组件的.js中设置事件
小程序----父子组件之间的三种通信方式_第16张图片
并在父组件的.wxml中显示
小程序----父子组件之间的三种通信方式_第17张图片
然后,子组件的事件触发器也就要和父组件的事件绑定(其中value中返回的值将会返回给父组件中的.js文件中的syncCount函数)
小程序----父子组件之间的三种通信方式_第18张图片

3.获取组件实例—实现父子组件内的通信

小程序----父子组件之间的三种通信方式_第19张图片
1.小程序----父子组件之间的三种通信方式_第20张图片
使用
小程序----父子组件之间的三种通信方式_第21张图片
小程序----父子组件之间的三种通信方式_第22张图片
小程序----父子组件之间的三种通信方式_第23张图片

你可能感兴趣的:(微信小程序,小程序)