原生小程序 之 behaviors ( 类似 mixins混合)

原生小程序 之 behaviors ( 类似 mixins混合)

• behaviors 作用
  • behaviors 是小程序之中，用于实现组件 间 代码共享的特性，类似vue的mixins

使用 behaviors 共享一些数据

新建一个 behaviors / my-behaviors .js 文件

// 类似 mixins 混合的 代码共享 文件
module.exports = Behavior({
  data:{
    uname:"xzl",
    age:20,
    num:0
  },
  properties:{},
  methods:{
    addNum(){
      this.setData({
        num: this.data.num + 1
      })
    }
  }
})

使用 behaviors 贡献数据

父亲
<!--pages/info/info.wxml-->
<view>
  <test></test>
  <view>
    我是info组件
    {{ age }}
  </view>
</view>
// pages/info/info.js
const MyBehaviors = require("../../behaviors/my-behaviors");
Page({
  behaviors:[MyBehaviors],
  data: {
    age:100
  },
})
// info.json
{
  "usingComponents": {
    "test":"/component/test/test"
  }
}

子
<!--component/test/test.wxml-->
<view>
  <view > 我是 使用混合的uname {{ uname }} - age-{{ age }} </view>
  <view> 我是 num - {{ num }} </view>
  <button bindtap="callAddNum">调用addNum事件</button>
</view>
  // component/test/test.js
  const MyBehaviors = require("../../behaviors/my-behaviors");
  Component({
    behaviors:[MyBehaviors],
    properties: {
    },
    data: {
    },
    methods: {
      callAddNum(){
        // 调用 里面的方法
        this.addNum()
      }
    },
  })

• 效果