微信小程序 day4

1. 纯数据字段

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

 纯数据字段定义方法

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

代码演示

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

2. 组件生命周期

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

生命周期函数	参数	描述说明
*created	无	在组件实例刚刚被创建时执行
*attached	无	在组件实例进入页面节点时执行
*ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
*detached	无	在组件实例被从页面节点树移除时执行
error	Object 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	无	组件所在页面被隐藏时执行
resize	Object 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的值