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

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

一,behaviors

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

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

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

二,组件中使用

1,创建behaviors

20200704182143554.png

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

模板:

  1. //mixin.js
  2. module.exports = Behavior({
  3. behaviors: [],
  4. properties: {
  5. myBehaviorProperty: {
  6. type: String
  7. }
  8. },
  9. data: {
  10. myBehaviorData: {}
  11. },
  12. attached: function(){},
  13. methods: {
  14. myBehaviorMethod: function(){}
  15. }
  16. })

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

  1. module.exports = Behavior({
  2. methods: {
  3. $emit(ename,evalue){
  4. this.triggerEvent(ename, evalue)
  5. }
  6. }
  7. })

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

  1. // components/searcher/index.js
  2. import my_mixin from "../../utils/mixin"
  3. Component({
  4. behaviors: [my_mixin],
  5. /**
  6. * 组件的属性列表
  7. */
  8. properties: {
  9. },
  10. /**
  11. * 组件的初始数据
  12. */
  13. data: {
  14. myEventDetail:{
  15. name:'小米'
  16. }
  17. },
  18. /**
  19. * 组件的方法列表
  20. */
  21. methods: {
  22. onTap(){
  23. this.$emit('myevent', this.data.myEventDetail)//调用$emit方法
  24. }
  25. }
  26. })

发表评论

表情:
评论列表 (有 0 条评论,195人围观)

还没有评论,来说两句吧...

相关阅读