微信小程序监听器、微信小程序纯数据字段、微信小程序组件的生命周期、微信小程序插槽、微信小程序组件通信、Behavior是什么

// wxml
<view>
  {{num1}}+{{num2}}={{sum}}
</view>
<button bindtap='num1Handel' >num1++</button>
<button bindtap='num2Handel' >num2++</button>

// 组件 coma.js
Component({
 // 使用observer 监听
  observers: {
    // 监听num1 和 num2
    'num1,num2'(num1, num2) {
      this.setData({
        sum: num1 + num2
      })
    },
  },

2、监听复杂数据类型

// 声明复杂数据类型 
data:{
    obj: {
      name: 'ldh',
      age: 18
    }
 }     

// 使用observer 监听
observer:{
 'obj.name'() {
    console.log('name改变了');
  },
// 监听obj 所有的属性
  'obj.**'(){
    console.log('obj改变了');
  }
}

二、纯数据字段

文档地址：纯数据字段 | 微信开放文档

有些情况下，某些 data 中的字段（包括 setData 设置的字段）既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用，主要是与提高性能。

在js文件中设置：

options: {
// 匹配_ 开头的数据，设置为纯数据字段
  pureDataPattern:/^_/
},

data中

data: {
    _msg : 18
}

上述组件中的纯数据字段不会被应用到 WXML 上：

// 不会应用到页面上
<view> {{ _msg }} </view>

三、组件的生命周期

文档地址：组件生命周期 | 微信开放文档

生命周期较多，详细看文档

1、组件自己的生命周期函数

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

2、组件所在页面的生命周期函数

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

四、组件的插槽使用

分为具名插槽和匿名插槽

1、wxml 文件page页应用 com-c 组件，并填写插槽

<com-c>
  <view slot='before'>我是before具名插槽 </view>
  <view>我是匿名插槽</view>
  <view slot='affter'>我是affter具名插槽</view>
</com-c>

2、在组件内声明出口

使用name 来使用具名插槽，slot 来接收匿名插槽

<slot name='before'></slot>
<text>components/comc/comc.wxml</text>
<slot></slot>
<slot name='affter'></slot>

3、因为此处需要使用多个slot 所以我们需要设置配置项

// 在组件的 js 文件中设置options
// 这样就可以使用 多个slot 标签了
  options: {
    multipleSlots: true
  },

五、小程序组件通信

文档地址：组件间通信与事件 | 微信开放文档

1、通过自定义事件子传父

组件内使用this.triggerEvent 来触发父组件的自定义事件，同时可以传递参数

子组件：

// wxml部分
<button bindtap='handel'>点击子传父</button>

// js部分
 handel() {
    // 触发父组件自定义事件
   this.triggerEvent('myevent', {
    name: 'ldh',
    age: 18
   })
 },

父组件：

// 定义自定义事件 myevent 
<com-d str="{{str}}" bindmyevent='myevent'></com-d>

 // 获得子组件传递的参数
  myevent(payload) {
    console.log(payload.detail);
  },

2、通过获取组件实例获取

wxml 部分：

// 父组件 给组件添加标识符，比如id 或者class 都可以
<button bindtap="getComd" type="primary" >点击获取组件</button>
<com-d str="{{str}}" id="comd" bindmyevent='myevent'></com-d>

js部分：

父组件传递的prop 数据和子组件的私有data 数据都可以在获取组件实例中的data属性中获取到

  getComd() {
    // 获得组件实例
    const comd = this.selectComponent('#comd');
    // 调用组件的setData方法 把子组件的数据修改
    // 他存放在data中
    comd.setData({
      name: '父组件把他修改了'
    })
  },

六、Behavior

文档地址：behaviors | 微信开放文档

behaviors 是用于组件间代码共享的特性

1、在根目录下创建 my-behaviors.js文件

2、my-behaviors.js 声明

module.exports = Behavior({
  data: {
    age: 18,
    name: 'zxy'
  },
  methods: {
    _showData() {
      console.log(`我叫${this.data.name},我今年${this.data.age}`);
    }
  }
})

3、在组件中使用

behaviors 文件引入后挂载在组件中data中。可以直接使用

注意：当组件中data 与 behaviors 中具有相同的属性时，组件中的data 中的值会覆盖他相同的值

const myBehaviors = require('../../behaviors/my-behaviors')
Component({
  behaviors: [myBehaviors],

// ...
})