数据监听器
通过observers声明数据监听器
使用场景：1、需要监听数据的变化 2、在数据变化之后，进行一些操作的时候
<view wx:for="{{ listData }}" wx:key="index" class="tab {{ active === index ? 'active' : '' }}" bindtap="onItemClick" data-index="{{index}}">
{{item.label}}
</view>
/**
* 1. 监听用户选中项的变化
* item 点击事件处理
*/
onItemClick(e) {
// 1.1：获取用户选中的 下标
const {
index
} = e.target.dataset;
// 1.2：修改选中项
this.setData({
active: index
})
}
/**
* 1.3：监听 active 的变化
* 通过 observers 定义数据监听器
*/
observers: {
// key 为要监听的数据
// value 为当数据发生变化时，调用的函数
active: function (active) {
// 2：获取用户选中的数据的 `id`
const {id} = this.data.listData[active]
}
}
组件通讯
1、父传子
// 子组件：通过 properties 声明要从父组件中接收的数据
/**
* 组件的属性列表
*/
properties: {
tabId: String
},
// 父组件：通过自定义属性的形式传递数据，以子组件中定义的 key 为属性名，以要传递的数据为属性值
<list tabId="{{tabSelectId}}">
2、子传父
// 子组件：通过 triggerEvent 方法发送一个通知，通知父组件接收数据。
// 方法的第一个参数为：通知名
// 方法的第二个参数为：要传递的数据
this.triggerEvent('change', {
id
})
// 父组件：通过 bind 监听子组件中发送的通知
// bind 后的内容为 子组件发送的通知名，表达式为接收到该通知时所触发的方法
<tabs bind:change="onTabChange"></tabs>
// 方法被触发后可以通过 e.detail 的形式获取子组件传递过来的数据对象
onTabChange (e) {
const {id} = e.detail;
this.setData({
tabSelectId: id
})
}
3、兄弟传值
- 【兄弟 A 组件】传递数据给 父组件（中间人）
- 父组件（中间人）再把数据传递给 【兄弟 B 组件】
插槽
1、单一插槽
在组件中使用slot组件定义插槽。
表示：占据了这一块空间，等待父组件填充。
// 使用单一插槽
小程序默认只能定义一个插槽，如果要定义多个插槽那么需要：**在组件中指定 `options` 选项的 `multipleSlots` 选项为 `true`**
然后通过 `slot` 的 `name` 属性为插槽命名。例如：`<slot name="header"></slot>`
2、多个插槽
小程序默认只能定义一个插槽，如果要定义多个插槽那么需要：在组件中指定options选项的 multipleSlots 选项为true
然后通过slot的name属性为插槽命名。例如：<slot name="header"></slot>
// 使用多个插槽
<component>
<view slot="header">该元素将被插入到 name=header 的插槽中</view>
<view slot="footer">该元素将被插入到 name=footer 的插槽中</view>
</component>
