微信小程序 day4

本文介绍了微信小程序中纯数据字段的概念,用于提高页面更新效率。详细阐述了组件的生命周期,包括created、attached、detached和ready等阶段及其使用场景。同时,讲解了插槽机制,用于父组件向子组件内容填充。最后,讨论了父子组件之间的数据传递,包括属性绑定和事件绑定,并提及如何获取子组件实例进行直接交互。
摘要由CSDN通过智能技术生成

1. 纯数据字段

options:既不展示在页面上也不传递给其它组件,只在当前组件中使用,系统不对纯数据字段进行响应,有助于提高页面更新效率

 纯数据字段定义方法

在 options 中,指定 pureDataPattern 为一个正则表达式,字段名符合这个正则的将会被视为纯数据字段。

代码演示

Component({
    options: {
        // 指定所有_开头的数据字段为 纯数据字段
        pureDataPattern: /^_/
    },
    data: {
        a: true, // 普通数据字段
        _b: true // 纯数据字段
    }
})

2. 组件生命周期

2.1 组件内部生命周期及说明

生命周期函数参数描述说明
*created在组件实例刚刚被创建时执行
*attached在组件实例进入页面节点时执行
*ready在组件在视图层布局完成后执行
moved在组件实例被移动到节点树另一个位置时执行
*detached在组件实例被从页面节点树移除时执行
errorObject Error每当组件方法抛出错误时执行

2.2 组件内主要的生命周期及用法

在小程序中主要用到的组件生命周期为created、attached、detached、ready

2.2.1 created

此时调用 setData 不会有效果,通常在这个生命周期函数中,只应该用于给组件的 this 添加一些自定义的属性字段

2.2.2 attached

此时, this.data 已被初始化完毕,这个生命周期很有用,绝大多数初始化的工作 可以在这个时机进行(例如发请求获取初始数据)

2.2.3 detached

退出页面时,会触发页面内每个自定义组件的 detached 生命周期函数,此时适合做一些清理性质的工作, 例如 , 清除定时器

2.2.4 ready

可以操作页面

2.2.5 lifetimes节点

 在定义小程序组件生命周期时,可以直接在 Component 的第一参数级中,也可以定义在 lifetimes 节点中,此为最高优先级,推荐。

代码演示

Component({
    // 推荐用法
    lifetimes: {
        attached() {},
        detached() {},
    }
})

2.3 页面内组件的生命周期

当组价需要根据所在页面的变化做出反应时,需要用到页面内组件的生命周期

 2.3.1 页面内组件生命周期

生命周期函数参数描述
show组件所在页面被展示时执行
hide组件所在页面被隐藏时执行
resizeObject Size组件所在页面尺寸变化时执行

2.3.2 pagelifetimes 节点

组件所在页面的生命周期函数,需要定义在 pageLifetimes 节点中

 演示代码

Component({
    // 组件在页面的生命周期函数在该节点定义
    pageLifetimes: {
        show () {}, // 页面被展示
        hide () {}, // 页面被隐藏
        resize () {} // 页面尺寸变化
    }
})

3. 插槽

子挖坑,父占位

3.1 单个插槽

子
<view>
  <slot></slot>       slot占位置,等待父元素填充
</view>

父
<view>
  <son>单个插槽</son>    引入son,在标签son内所写内容,就是子标签slot内显示内容
</view>

3.2 多个插槽

子
<view>
  <slot name="A"></slot>       给slot加name属性值
  <slot name="B"></slot>
</view>

父
<view>
  <son>
    <view slot="A"></view>     在标签son 内的标签中加入 slot 属性值,对应子组件内name值
    <view slot="B"></view>
  </son>
</view>

4. 父子组件传值

4.1 属性绑定

父向子传值,只能传普通数据类型,不能传方法等

代码演示

父
<son count={{count}}></son>

子
properties:{
    count:Number
}

4.2 事件绑定

子向父传值,可以传递任何类型数据

代码演示

子
<button bindtap="addCount">+1</button>

addCount() {
    this.setData({
        count : this.properties + 1
    })
    this.tiggerEvent('sync', {value: this.properties.count})
}


父
<son count="{{count}}" bind:sync="syncCount"></son>

syncCount (e) {
    this.setData({
        // 父组件通过事件对象 e 获取到子组件传递的值
        count: e.detail.value
    })
}

4.3 获取组件实例

可在父组件里调用 this.selectComponent("id class 选择器 ") ,获取子组件的实例对象,从而直
接访问子组件的任意数据和方法。调用时需要传入一个选择器,例如 this.selectComponent(".my
component")

<!--
父组件的wxml文件
使用 bind:自定义事件名称(推荐: 结构清晰
-->
<my-test class="cusstomA" id="cA" count="{{count}}" bind:sync="syncCount">
</my-test>
<button bindtap="getChild">获取子组件实例</button>
//父组件的js文件 按钮的tap事件处理函数
getChild() {
// 切记下面的参数不能传递标签选择器,不然返回的是null
// 也可以传递ID选择器
const child = this.selectComponent('.customA')
// 调用子组件的setData方法,修改count的值,
child.setData({ count: this.data.count + 1 })
child.addCount() // 直接调用子组件的addCount方法,该方法在child实例对象的
__proto__上可以访问到该方法
}
// 这里的代码其实有点问题, 因为count的数据是属于父组件的, 并且由父组件通过自定义属性传递
给了子组件, 如果想修改这个count的值, 直接在父组件中修改即可, 子组件自动就能更新.完全没有
必要再这种场景下去修改子组件中count的值

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值