【微信小程序】-- 自定义组件总结 (四十)
创始人
2025-05-28 08:54:41
0

请添加图片描述

  • 💌 所属专栏:【微信小程序开发教程】

  • 😀 作  者:我是夜阑的狗🐶

  • 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询!

  • 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘

文章目录

  • 前言
  • 一、创建并引用组件
  • 二、组件的样式隔离选项
  • 三、数据监听器
  • 四、纯数据字段
  • 五、父子组件通信
  • 六、behaviors
  • 总结


前言

  大家好,又见面了,我是夜阑的狗🐶,本文是专栏【微信小程序开发教程】专栏的第40篇文章;
  今天开始学习微信小程序的第22天💖💖💖,开启新的征程,记录最美好的时刻🎉,每天进步一点点。
  专栏地址:【微信小程序开发教程】, 此专栏是我是夜阑的狗微信小程序开发过程的总结,希望能够加深自己的印象,以及帮助到其他的小伙伴😉😉。
  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。


一、创建并引用组件

  前面已经介绍了自定义组件的基本内容,通过栗子学习了组件的基本语法、样式、数据监听器和组件之间的通信,以及 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)
  • 同名的生命周期函数

总结

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

在这里插入图片描述

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

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

更多专栏订阅:

  • 😀 【LeetCode题解(持续更新中)】
  • 🚝 【Java Web项目构建过程】
  • 💛 【微信小程序开发教程】
  • 【JavaScript随手笔记】
  • 🤩 【大数据学习笔记(华为云)】
  • 🦄 【程序错误解决方法(建议收藏)】
  • 🚀 【软件安装教程】



订阅更多,你们将会看到更多的优质内容!!

相关内容

热门资讯

郭沫若的现代诗 郭沫若的现代诗  郭沫若是我国现代文学史上的大家,他在文学方面的成就是多方面的,而诗歌成就则首当其称...
有关赞美春天的诗歌5篇 在日常学习、工作或生活中,说到诗歌,大家肯定都不陌生吧,诗歌是表现诗人思想感情的一种文学样式。你知道...
顺口溜和押韵的诗歌 顺口溜和押韵的诗歌  诗歌,是一种抒情言志的文学体裁。是用高度凝练的语言,生动形象地表达作者丰富情感...
回乡见闻诗歌 关于回乡见闻诗歌  关于回乡见闻诗歌篇一:回乡见闻  《老屋》  那片曾经  祖祖辈辈守下来  盛满...
诗歌赏析:深圳新洲村 诗歌赏析:深圳新洲村  尘土飞扬  骑一匹快马,擎一杆旗  在高高的山岗上  先是慢慢地走,然后疾驰...
世界诗歌普希金抒情诗(2) 世界诗歌普希金抒情诗  够了,躲开吧!时令已变换了,  土地已复苏!雷雨消逝无踪:  你看那微风,轻...
爱国主题的诗歌朗诵稿 爱国主题的诗歌朗诵稿(通用18篇)  在社会一步步向前发展的今天,大家一定没少看到经典的朗诵稿吧,朗...
庆祝教师节诗歌 庆祝教师节诗歌(精选15首)  在学习、工作或生活中,大家最不陌生的就是诗歌了吧,诗歌具有音韵和谐,...
不信楼头杨柳月,玉人歌舞未曾... “不信楼头杨柳月,玉人歌舞未曾归。”出处 出自 宋代 谢枋得 的《蚕妇吟》“不信楼头杨柳月,玉人歌舞...
金波的最短诗歌 金波的最短诗歌  在学习、工作、生活中,大家都收藏过自己喜欢的诗歌吧,诗歌语言凝练而形象性强,具有鲜...
关于感恩老师的诗歌5篇 在日复一日的学习、工作或生活中,大家都收藏过令自己印象深刻的诗歌吧,诗歌具有语言高度凝练、篇幅短小精...
小年夜的诗词 有关小年夜的诗词大全  今天,我们一起通过十首诗词, 来看看,古人都是怎么过小年的吧!以下是小编整理...
李清照千古名句 李清照千古名句  引导语:一个婉约感伤的奇女子,一个能心怀国家的`奇女子,一个在文学造诣上千古难得的...
“乡心新岁切,天畔独潸然。”... 乡心新岁切,天畔独潸然。 [译文] 我的思乡之情在新年里更显迫切,独自一人流落在天涯,想着别人的团聚...
寻诗两绝句赏析 寻诗两绝句赏析  “醒来推户寻诗去”白天寻诗,夜晚寻诗,表现了陈居士沉迷于诗歌创作的高雅情趣。作者简...
谷雨茶的诗句 关于谷雨茶的诗句  古诗是古代中国诗歌的.泛称,指古代中国人创作的诗歌作品。广义的古诗包括诗、词、散...
天涯,天涯李商隐,天涯的意思... 天涯,天涯李商隐,天涯的意思,天涯赏析 -诗词大全 天涯 作者:李商隐朝代:唐体裁:五言绝句 ...
中秋节的诗句和传说 中秋节的诗句和传说  中秋节始于唐朝初年,盛行于宋朝,至明清时,已与元旦齐名而成为中国的主要节日之一...
鹧鸪天,鹧鸪天韩淲,鹧鸪天的... 鹧鸪天,鹧鸪天韩淲,鹧鸪天的意思,鹧鸪天赏析 -诗词大全  鹧鸪天,鹧鸪天韩淲,鹧鸪天的意思,鹧鸪天...
描写寒冷天气的诗句 描写寒冷天气的诗句  昆仑之高有积雪,蓬莱之远常遗寒。不能手提天下往,何忍身去游其间?王令的`《暑旱...