微信小程序官方文档对这部分已经有了说明:
组件间的基本通信方式有以下几种。
WXML 数据绑定:用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容数据(自基础库版本 2.0.9 开始,还可以在数据中包含函数)。具体在 组件模板和样式 章节中介绍。
事件:用于子组件向父组件传递数据,可以传递任意数据。
如果以上两种方式不足以满足需要,父组件还可以通过
this.selectComponent
方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。
但是对于初学者来说有些难以理解,下面我们一步一步来给大家解释。
1.父组件(页面)传值给子组件(含调用子组件的方法)
1.1 方法1——利用子组件属性传递动态数据
模板数据绑定
与普通的 WXML 模板类似,可以使用数据绑定,这样就可以向子组件的属性传递动态数据。
代码示例:
这里是插入到组件slot中的内容
在以上例子中,组件的属性
propA
和
propB
将收到页面传递的数据。页面可以通过
setData
来改变绑定的数据字段。
注意:这样的数据绑定只能传递 JSON 兼容数据。自基础库版本 2.0.9 开始,还可以在数据中包含函数(但这些函数不能在 WXML 中直接调用,只能传递给子组件)。
下面我们用实例代码来详细说明,不啰嗦,上代码。
页面代码
页面js代码
//index.js
//获取应用实例
const app = getApp()
Page({
data:{
dadVal1:"父组件数据1