微信小程序——behaviors组件混入

不念不忘少年蓝@ 2023-02-23 01:28 124阅读 0赞

# 一，behaviors #

`behaviors` 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。

每个 `behavior` 可以包含一组属性、数据、生命周期函数和方法。**组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。** 每个组件可以引用多个 `behavior` ，`behavior` 也可以引用其它 `behavior` 。

详细的参数含义和使用请参考 [Behavior 参考文档][Behavior]。

## 二，组件中使用 ##

### 1，创建behaviors ###

![20200704182143554.png][]

写一个js文件，用来放我们的 behaviors混入的方法

模板：

//mixin.js
    module.exports = Behavior({
      behaviors: [],
      properties: {
        myBehaviorProperty: {
          type: String
        }
      },
      data: {
        myBehaviorData: {}
      },
      attached: function(){},
      methods: {
        myBehaviorMethod: function(){}
      }
    })

### 2，写上我们需要在组件中混入的方法 ###

module.exports = Behavior({
     
      methods: {
        $emit(ename,evalue){
          this.triggerEvent(ename, evalue)
        }
      }
    })

### 3，组件引入mixin.js，调用混入方法 ###

// components/searcher/index.js
    import my_mixin from "../../utils/mixin"
    Component({
      behaviors: [my_mixin],
      /**
       * 组件的属性列表
       */
      properties: {
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        myEventDetail:{
          name:'小米'
        }
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        onTap(){
           this.$emit('myevent', this.data.myEventDetail)//调用$emit方法
           
        }
      }
    })

[Behavior]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Behavior.html
[20200704182143554.png]: https://img-blog.csdnimg.cn/20200704182143554.png