微信小程序父子组件通信

父子组件之间有3种通信方式

1、属性绑定

用于父组件向子组件的指定属性设置数据，只能传递普通类型的数据，无法将方法传递给子组件

2、事件绑定

用于子组件向父组件传递数据，可以传递任意数据①在父组件的js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件②在父组件的wxml中，通过自定义事件的形式，将步骤①中定义的函数引用，传递给子组件③在子组件的js中，通过调用this.triggerEvent('自定义事件名称', {/*参数对象*/})，将数据发送到父组件④在父组件的js中，通过e.detail获取到子组件传递过来的数据

3、获取组件示例

父组件还可以通过this.selectComponent('id或class选择器') 获取子组件实例对象。直接访问子组件的任意数据和方法

1、属性绑定

创建组件

组件对外开放属性

properties: {count: Number
},

组件wxml

<view>子组件中count为：{{count}}</view>

页面

页面js
data: {count: 10
},

页面wxml
<view>父组件中的count为：{{count}}</view>
<my-test5 count="{{count}}"></my-test5>  //通过组件的count属性将值传入

2、事件绑定

页面js
syncCount(e){   //此参数用于接收子组件传递过来的数据console.log('syncCount'),console.log(e)    //输出子组件传递过来的值this.setData({count: e.detail.value    //使用子组件的值})
},

页面wxml
<view>父组件中的count为：{{count}}</view>
<my-test5 count="{{count}}" bind:sync="syncCount"></my-test5> <!-- 将方法通过自定义事件传给子组件 bind:事件名=方法名 -->

子组件js
methods: {addCount(){this.setData({count: this.properties.count+1}),this.triggerEvent('sync',{value: this.properties.count}) //调用父组件传递过来的方法并传值}
}

3、获取组件示例

页面wxml
<view>父组件中的count为：{{count}}</view>
<my-test5 count="{{count}}" bind:sync="syncCount" class="customA" id="cA"></my-test5>
<button bindtap="getChild">获取子组件的实例对象</button>

页面js
getChild(){const child = this.selectComponent('#cA')console.log(child)child.setData({count: child.properties.count+1})
},

微信小程序父子组件通信相关推荐

微信小程序父子组件通信详解
1 父组件向子组件传递数据: 1.1 在父组件的文件夹中的.json文件下引入子组件 {"usingComponents": {//"Tab" 是自己定义的组件 ...
微信小程序父子组件传值问题
微信小程序父子组件传值问题把自己碰到的问题或者学到的东西在这里总结,慢慢积累在父子组件传值时,我发现子组件竟然拿不到父组件传过来的值. 我指的拿不到父组件的值,是指在子组件的生命周期created ...
可以实现微信小程序父子组件实时通信的插件
小程序在组件化开发的时候可能没有达到vue那样的便捷,例如跨组件状态同步等. 这个插件可以: 1.通过代理的方式,为小程序添加了跨组件实时通信:父子组件实时同步状态功能: 2.与vue相似的Watch ...
微信小程序父子组件相互通信
父组件传值给子组件在父组件中引用子组件 {"component": true,"usingComponents": {"alert-tip" ...
微信小程序父子组件通讯/传值
3种方式: 属性绑定:父组件向 --> 子组件的指定属性设置数据.仅能设置json兼容的数据,如:基本数据类型.object等 (不能传递复杂属性的数据,如:方法等). 事件绑定:子组件向 ...
微信小程序父子组件方法调用方法汇总
父组件向子组件传值父组件通过属性传值 <childEle childParams="{{params}}"></childEle> 子组件通过proper ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...
一步步教你实现微信小程序自定义组件
一步步教你实现微信小程序自定义组件更新时间:2022年03月21日 11:12:34 作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...
微信小程序--自定义组件（超详细从新建到使用）
微信小程序–自定义组件微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...

微信小程序父子组件通信

父子组件之间有3种通信方式

1、属性绑定

2、事件绑定

3、获取组件示例

1、属性绑定

创建组件

2、事件绑定

3、获取组件示例

微信小程序父子组件通信相关推荐

最新文章

热门文章