数据监听器
通过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属性为插槽命名。例如：
// 使用多个插槽
<component><view slot="header">该元素将被插入到 name=header 的插槽中</view><view slot="footer">该元素将被插入到 name=footer 的插槽中</view>
</component>
的秘密)
