微信小程序-behaviors

什么是 behaviors

behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins”
每个 behavior 可以包含一组属性，数据，生命周期函数和方法，组件引用它时，它的属性，数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior，behavior 也可以引用其它 behavior。

?> 大白话：用来封装多个组件中相同的冗余代码

新建两个组件，一个叫 c-test，一个为 c-demo，两个组件的内容大致就是有一个 counter 变量，每一个组件中有两个按钮，一个按钮点击对 counter 进行增加，一个对 counter 进行减少，然后我们可以将这种冗余的代码进行使用 behavior 进行封装复用，我这里就没有用案例去引出 behavior 的方式进行讲解了，我只是体现这一下 behavior 这个知识点的运用。

?> myBehaviors.js

代码语言：javascript复制

// myBehavior.js
export const counterBehavior = Behavior({
  data: {
    counter: 0
  },
  methods: {
    increase() {
      this.setData({counter: this.data.counter   1});
    },
    decrease() {
      this.setData({counter: this.data.counter - 1});
    }
  }
});

?> c-test

代码语言：javascript复制

// components/c-test/c-test.js
import {counterBehavior} from "../../behaviors/myBehaviors";
Component({
  behaviors: [counterBehavior]
})

代码语言：javascript复制

<!--components/c-test/c-test.wxml-->
<text>{{counter}}</text>
<button bindtap="increase">我是c-test按钮 increase</button>
<button bindtap="decrease">我是c-test按钮 decrease</button>

?> c-demo

代码语言：javascript复制

// components/c-demo/c-demo.js
import {counterBehavior} from "../../behaviors/myBehaviors";

Component({
  behaviors: [counterBehavior]
})

代码语言：javascript复制

<!--components/c-demo/c-demo.wxml-->
<text>{{counter}}</text>
<button bindtap="increase">我是c-demo按钮 increase</button>
<button bindtap="decrease">我是c-demo按钮 decrease</button>

?> index

代码语言：javascript复制

<!--index.wxml-->
<myTest />
<view/>
<myDemo />

代码语言：javascript复制

{
  "usingComponents": {
    "myTest": "/components/c-test/c-test",
    "myDemo": "/components/c-demo/c-demo"
  }
}

参考文章

官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Behavior.html

最终 behavior 是将中的内容分别复制了一份放到了对应使用的组件当中

counter 函数生命周期数据微信小程序

0 人点赞