组件间通信
组件间的基本通信方式有以下三种。
- WXML 数据绑定:用于父组件向子组件的指定属性设置数据
- 事件:用于子组件向父组件传递数据,可以传递任意数据。
- 如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。
WXML数据绑定 - 父传子
<!-- 组件 my-component.wxml–>
组件内部的标签
<!--components/my-component/my-component.wxml-->
<!-- WXML数据绑定 - 父传子 -->
<view>
{
{sayHello}}
<slot></slot>
</view>
// 组件 my-component.js
这里定义一个属性sayHello 它是一个String 类型,父级页面可以通过它给子组件传入值
// components/my-component/my-component.js
properties: {
sayHello: String
}
// 页面 index.json
在需要使用组件的页面引入组件 这项是必须的 。这里的my-component名字可以自己定义
{
"usingComponents": {
"my-component": "/components/my-component/my-component"
}
}
//页面 index.js
data: {
hello: 'hello world!'
},
<!-- 页面 index.wxml–>
</
在使用组件的页面中 可以调用组件中定义的属性 sayHello,并传值给组件内部