【微信小程序】-- 自定义组件总结 (四十)

简介: 【微信小程序】-- 自定义组件总结 (四十)



一、创建并引用组件

  前面已经介绍了自定义组件的基本内容,通过栗子学习了组件的基本语法、样式、数据监听器和组件之间的通信,以及 behaviors。接下来就来对这些所学内容的进行一个总结吧。正所谓温故而知新嘛,话不多说,让我们原文再续,书接上回吧。

  组件的引用方式有两种:全局引用和局部引用。在实际开发过程中,全局引用组件比较多,而局部引用相对比较少,通过前面栗子学习能够创建并引用组件,引用组件需要用到 usingComponents 参数。

二、组件的样式隔离选项

  根据前面栗子学习能够知道如何修改组件的样式隔离选项,通过来对 styleIsolation 属性进行设置,具体属性如下所示:

可选值 默认值 描述
isolated 表示启用样式隔离,在自定义组件内外,
使用 class 指定的样式将不会相互影响
apply-shared 表示页面 wxss 样式将影响到自定义组件,
但自定义组件 wxss 中指定的样式不会影响页面
shared 表示页面 wxss 样式将影响到自定义组件,
自定义组件 wxss 中指定的样式也会影响页面和
其他设置了 apply-sharedshared 的自定义组件

三、数据监听器

  能够知道如何定义和使用数据监听器,在 observers 节点上进行数据监听,除了可以对单个数据进行了监听,此外数据监听器还支持监听对象中单个或多个属性的变化。

  在实际开发过程中,对象的属性都比较多,如果某个对象中需要被监听的属性太多,为了方便,可以使用通配符 ** 来监听对象中所有属性的变化,

四、纯数据字段

  能够知道如何定义和使用纯数据字段,在 Component 构造器的 options 节点中,指定 pureDataPattern 为一个 正则表达式,字段名符合这个正则表达式的字段将成为纯数据字段。

  例如有些情况下,某些 data 中的字段既不会展示在界面上,也不会传递给其他组件,仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。设置为纯数据字段有助于提升页面更新的性能

五、父子组件通信

  能够知道实现组件父子通信有哪3种方式,在小程序中,组件之间的通信方式如下所示:

通信方式 说明
属性绑定 用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据
事件绑定 用于子组件向父组件传递数据,可以传递任意数据
获取组件实例 父组件还可以通过 this.selectComponent() 获取子组件实例对象。
这样就可以直接访问子组件的任意数据和方法

  这里重点掌握就是事件绑定,注意:调用 this.selectComponent("id或class选择器") ,这里只能传递获取 idclass 选择器,不能传递标签选择器。

六、behaviors

  能够知道如何定义和使用behaviors,要清楚其工作方式:每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behaviorbehavior 也可以引用其它 behavior

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

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

总结

  感谢观看,这里就是自定义组件的总结,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。🎉


相关文章
|
6天前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
6天前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
6天前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
6天前
|
小程序 JavaScript
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
|
6天前
|
小程序 程序员
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
28 0
|
6天前
|
小程序 JavaScript
【微信小程序】之自定义四宫格(不用mp-grids扩展组件实现,这个组件太难用了)
【微信小程序】之自定义四宫格(不用mp-grids扩展组件实现,这个组件太难用了)
|
6天前
|
JSON 资源调度 小程序
一个强大的小程序富文本组件mp-html
一个强大的小程序富文本组件mp-html
40 0
|
6天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
6天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
6天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。

热门文章

最新文章