微信小程序从入门到进阶（三）

数据监听器

通过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、兄弟传值

1. 【兄弟 A 组件】传递数据给 父组件（中间人）
2. 父组件（中间人）再把数据传递给 【兄弟 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>

代码007普通

打赏 收藏 海报 链接