微信小程序-父子组件之间的通信
父子组件之间通信的3种方式:
- 属性绑定 用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据 子组件在properties节点中声明对应的属性并使用。代码: //子组件的properties节点 properties:{ count:Number } //子组件的wxml结构 <text>子组件count的值为:{ {count}}</text>
- 事件绑定 用于子组件向父组件传递数据,可以传递任意数据 事件绑定用于实现子向父传值,可以传递任意类型的数据,使用步骤: 在父组件的js中,定义一个函数,这个函数即将通过自定义时间的类型,传递给子组件 //在父组件中定义syncCount方法 //将来,这个方法会被传递给子组件,供子组件进行调用 syncCount(){ console.log(syncCount) } 在父组件的wxml中,通过自定义事件的形式,将步骤1中定义的函数引用,传递给子组件 <!--使用bind:自定义事件名称(推荐:结构清晰)--> <my-test3 count="{ {count}}" bind:sync=syncCount></my-test3> <!--或在bind后面直接写上自定义事件名称--> <my-test3 count="{ {count}}" bindsync=syncCount></my-test3> 在子组件的js中,通过调用this.triggerEvent(自定义事件名称,{/参数对象/}),将数据发送到父组件 //子组件的wxml结构 <text>子组件中,count值为:{ {count}}</text> <button type="primary" bindtap="addCount">+1</button> //子组件的js代码 methods:{ addCount(){ this.setData({ count:this.properties.count+1 }) this.triggerEvent(sync,{value:this.properties.count}) } } 在父组件的js中,通过e.detail获取到子组件传递过来的数据 syncCount(e){ this.setData({ count:e.detail.value }) }
- 获取组件的实例 父组件还可以通过this.selectComponent("id或者class选择器")获取子组件实例对象 这样就可以直接访问子组件的任意数据和方法
上一篇:
uniapp开发微信小程序-2.页面制作
下一篇:
基于微信小程序的汽车租赁系统源码