济南的网站建设公司哪家好,沧州网站建设联系电话,宜昌恒大帝景地址,网站建设安全需求#x1f48c; 所属专栏#xff1a;【微信小程序开发教程】 #x1f600; 作 者#xff1a;我是夜阑的狗#x1f436; #x1f680; 个人简介#xff1a;一个正在努力学技术的CV工程师#xff0c;专注基础和实战分享 #xff0c;欢迎咨询#xff01; … 所属专栏【微信小程序开发教程】 作 者我是夜阑的狗 个人简介一个正在努力学技术的CV工程师专注基础和实战分享 欢迎咨询 欢迎大家这里是CSDN我总结知识的地方喜欢的话请三连有问题请私信 文章目录前言一、behaviors1、什么是 behaviors2、behaviors 的工作方式3、创建 behavior4、导入并使用 behavior5、behavior 中所有可用的节点6、同名字段的覆盖和组合规则总结前言 大家好又见面了我是夜阑的狗本文是专栏【微信小程序开发教程】专栏的第39篇文章; 今天开始学习微信小程序的第22天开启新的征程记录最美好的时刻每天进步一点点。 专栏地址【微信小程序开发教程】 此专栏是我是夜阑的狗微信小程序开发过程的总结希望能够加深自己的印象以及帮助到其他的小伙伴。 如果文章有什么需要改进的地方还请大佬不吝赐教。 一、behaviors 前面已经介绍了自定义组件 - 父子组件之间的通信通过栗子学习了父组件如何给子组件传递以及父子组件之间传值进行同步。接下来就来讲解一下另外一个自定义组件 - behaviors。话不多说让我们原文再续书接上回吧。 1、什么是 behaviors behaviors 是小程序中用于实现组件间代码共享的特性类似于 Vue.js 中的 “mixins”。 2、behaviors 的工作方式 每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时它的属性、数据和方法会被合并到组件中生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior behavior 也可以引用其它 behavior 。
3、创建 behavior 创建 behaviors 文件夹以及对应的 js 文件调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象供所有的组件使用 my-behavior.js 使用 module.exports 将 behaviors 实例对象共享出去。
module.exports Behavior({// 属性节点data:{username: 我是夜阑的狗},// 私有数据节点properties: {},// 事件处理函数和自定义方法节点methods:{},
})4、导入并使用 behavior 在组件中使用 require() 方法导入需要的 behavior挂载后即可访问 behavior 中的数据或方法具体代码如下
test5.js
const myBehavior require(../../behaviors/my-behavior);Component({behaviors: [myBehavior],
})test5.wxml
text子组件中 count当前值为{{count}}/text
button bindtapaddCountcount1/button
viewbehaviors中的用户名是{{username}}/view可以来看一下运行效果 5、behavior 中所有可用的节点 接下来看一下 behavior 都有哪些节点可以用如下表所示
可用的节点类型是否必填描述最低版本propertiesObject Map否组件的对外属性是属性名到属性设置的映射表dataObject否组件的内部数据和 properties 一同用于组件的模板渲染observersObject否 组件数据字段监听器用于监听 properties 和 data 的变化参见 数据监听器2.6.1methodsObject否组件的方法包括事件响应函数和任意的自定义方法关于事件响应函数的使用参见 组件间通信与事件behaviorsString Array否类似于mixins和traits的组件间代码复用机制参见 behaviorscreatedFunction否组件生命周期函数-在组件实例刚刚被创建时执行注意此时不能调用 setData )attachedFunction否组件生命周期函数-在组件实例进入页面节点树时执行)readyFunction否组件生命周期函数-在组件布局完成后执行)movedFunction否组件生命周期函数-在组件实例被移动到节点树另一个位置时执行)detachedFunction否组件生命周期函数-在组件实例被从页面节点树移除时执行)relationsObject否组件间关系定义参见 组件间关系lifetimesObject否组件生命周期声明对象参见 组件生命周期2.2.3pageLifetimesObject否组件所在页面的生命周期声明对象参见 组件生命周期2.2.3definitionFilterFunction否定义段过滤器用于自定义组件扩展参见 自定义组件扩展2.2.3
6、同名字段的覆盖和组合规则 组件和它引用的 behavior 中可以包含同名的字段此时可以参考如下 3 种同名时的处理规则
同名的数据字段 (data)同名的属性 (properties) 或方法 (methods)同名的生命周期函数 关于详细的覆盖和组合规则大家可以参考微信小程序 官方文档 给出的说明。 这里以同名的属性为例来学习一下具体代码如下
my-behavior.js
module.exports Behavior({// 属性节点data:{username: 我是夜阑的狗},// 私有数据节点properties: {},// 事件处理函数和自定义方法节点methods:{},
})test5.js
Component({/*** 组件的初始数据*/data: {username: CSH},
})此时组件与引用的 behaviors 中属性名相同了这里组件的同名属性就会覆盖 behaviors 中属性可以来看一下运行效果 总结 感谢观看这里就是自定义组件 - behaviors 的介绍使用如果觉得有帮助请给文章点个赞吧让更多的人看到。 也欢迎你关注我。 原创不易还希望各位大佬支持一下你们的点赞、收藏和留言对我真的很重要 最后本文仍有许多不足之处欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正下期再见。 更多专栏订阅: 【LeetCode题解持续更新中】 【Java Web项目构建过程】 【微信小程序开发教程】⚽ 【JavaScript随手笔记】 【大数据学习笔记华为云】 【程序错误解决方法建议收藏】 【软件安装教程】 订阅更多你们将会看到更多的优质内容
