微信小程序从入门到进阶(三)

数据监听器

通过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>
相关推荐
2501_915909067 分钟前
iOS 加固工具实战解析,主流平台审核机制与工具应对策略
android·ios·小程序·https·uni-app·iphone·webview
The_era_achievs_hero7 分钟前
UniappDay04
vue.js·微信小程序·uni-app
2501_915106322 小时前
iOS WebView 调试实战,第三方脚本加载失败与内容安全策略冲突问题排查指南
android·ios·小程序·https·uni-app·iphone·webview
paopaokaka_luck7 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
老虎062713 小时前
JavaWeb(苍穹外卖)--学习笔记13(微信小程序开发,缓存菜品,Spring Cache)
笔记·学习·微信小程序
郭邯18 小时前
小程序中自定义组件的样式隔离
微信小程序
每天开心20 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
老华带你飞1 天前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽1 天前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
说私域2 天前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序