zl程序教程

您现在的位置是:首页 >  工具

当前栏目

微信小程序开发入门与实战(Behaviors使用)

微信入门 实战 程序开发 使用
2023-09-11 14:19:57 时间

请添加图片描述

@作者 : SYFStrive

 
请添加图片描述

@博客首页 : HomePage

📜: 微信小程序

📌:个人社区(欢迎大佬们加入) 👉:社区链接🔗

📌:觉得文章不错可以点点关注 👉:专栏连接🔗

💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞

请添加图片描述
在这里插入图片描述
相关专栏

👉 微信小程序(🔥)

自定义组件 - behaviors

    1、什么是 behaviors

behaviors 是小程序中,用于实现组件间代码共享的特性,类似于 Vue.js 中的 “mixins”。

    2、behaviors 的工作方式

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

    3、创建 behavior

调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象,供所有的组件使用如 👇

module.exports=Behavior({
  data:{
    username:'xiaoming'
  },
  properties:{},
  methods:{
    
  }
})

    4、导入并使用 behavior

在组件中,使用 require() 方法导入需要的 behavior,挂载后即可访问 behavior 中的数据或方法

如 👇

const behaviors=require("../../behaviors/behavios")

// components/text4/text4.js
Component({
  behaviors:[behaviors],
})

    5、behavior 中所有可用的节点

可用的节点类型是否必填描述
propertiesObject Map同组件的属性
dataObject同组件的数据
methodsObject同自定义组件的方法
behaviorsString Array引入其它的 behavior
createdFunction生命周期函数
attachedFunction生命周期函数
readyFunction生命周期函数
movedFunction生命周期函数
detachedFunction生命周期函数

    6、同名字段的覆盖和组合规则

组件和它引用的 behavior 中可以包含同名的字段,此时可以参考如下 3 种同名时的处理规则:

① 同名的数据字段 (data)
② 同名的属性 (properties) 或方法 (methods)
③ 同名的生命周期函数

Behaviors官方教程链接

总结

① 能够创建并引用组件

  1. 全局引用、局部引用、usingComponents

② 能够知道如何修改组件的样式隔离选项

  1. options 👉 styleIsolation( isolated, apply-shared, shared)

③ 能够知道如何定义和使用数据监听器

  1. observers

④ 能够知道如何定义和使用纯数据字段

  1. options 👉 pureDataPattern

⑤ 能够知道实现组件父子通信有哪3种方式

  1. 属性绑定、事件绑定、this.selectComponent(’ id或class选择器’)

⑥ 能够知道如何定义和使用behaviors

  1. 调用 Behavior() 构造器方法

最后

在这里插入图片描述
本文到这里就结束了,大佬们的支持是我持续更新的最大动力,希望这篇文章能帮到大家💪

 

                 相关专栏连接🔗
在这里插入图片描述

下篇文章再见ヾ( ̄▽ ̄)ByeBye

在这里插入图片描述