微信小程序的自定义组件
目录
一、组件的创建与引用
二、样式
三、数据、方法和属性
四、数据监听器
一、组件的创建与引用
① 创建
- 在项目的根目录中，鼠标右键，创建 components -> test 文件夹
- 在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component”
② 引用
| 类型 | 配置位置 | 代码 |
| 局部引用 | 页面的 .json |
|
| 全局引用 | app.json |
|
二、样式
① 组件样式隔离
- app.wxss 中的全局样式对组件无效
- 只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响
建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！
② 修改组件的样式隔离选项
默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。
但有时，我们希望在外界能够控制组件内部的样式 ，两种方法如下：
styleIsolation 的可选值
|
可选值 |
默认值 |
描述 |
|
isolated |
是 |
表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响 |
|
apply-shared |
否 |
表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面 |
|
shared |
否 |
表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件 |
三、数据、方法和属性
| component的内容 | 说明 | 代码图 |
| data(数据) | 用于组件模板渲染的私有数据 |
|
| methods(方法) | 事件处理函数和自定义方法 |
|
| properties(属性) | 用来接收外界传递到组件中的数据 |
|
data 和 properties 的区别
data 数据和 properties 属性在本质上没有任何区别，只不过
- data 更倾向于存储组件的私有数据
- properties 更倾向于存储外界传递到组件中的数据
四、数据监听器
① 什么是数据监器
数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。
② 数据监听器的基本用法
③ 监听对象属性的变化
微信小程序的自定义组件相关推荐
- 微信小程序 配置自定义组件代码按需注入 lazyCodeLoading
微信小程序 配置自定义组件代码按需注入 lazyCodeLoading 官方网址 在app.json最后一行加上,就可以了. "lazyCodeLoading": "re ...
- 微信小程序的自定义组件（2）
文章目录 6. 组件的生命周期 7. 组件所在页面的生命周期 8. 组件插槽 9. 组件父子组件间的通信 10. 组件-behaviors 6. 组件的生命周期 created attached re ...
- 微信小程序（自定义组件）
文章目录 自定义组件 创建自定义组件 引用组件 组件和页面的区别 自定义组件的样式 样式隔离 修改样式隔离选项 组件的data和methods 组件的properties 数据监听 使用纯数据字段提升 ...
- 微信小程序之自定义组件的使用、介绍、案例分享
微信小程序自定义组件介绍 自定义组件发开文档 类似vue或者react中的自定义组件, 小程序允许我们使用自定义组件的方式来构建页面. 自定义组件的使用 1. 创建组件(js,json,wxml,wx ...
- 微信小程序之自定义组件(微信小程序完结)
微信小程序 自定义组件 类似vue或者react中的自定义组件, 小程序允许我们使用自定义组件的方式来构建页面. 1.1 创建自定义组件 类似于页面,一个自定义组件由 json, wxml, wxss ...
- 微信小程序中自定义组件
文章目录 小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js 自定义组件 compone ...
- 微信小程序_自定义组件_初体验
自定义组件是微信小程序中重要的组成部分,是实现模块化开发的重要手段 个人认为,自定义组件是区分菜鸟与高手的分水岭 第一篇先介绍小程序自定义组件的基本使用 自定义组件的使用可以分为如下几个步骤 创建组件 ...
- 【微信小程序】自定义组件的实现及数据交互
简单的自定义组件 本文的使用场景是:多个页面都需要用到拨打电话功能,为减少代码量.便于维护,所以自定义了一个组件,每个页面直接调用即可.基本实现下图样式: 下面我们来一步步的实现它: step1:创建 ...
- 微信小程序 - 在自定义组件中请求后端 API 数据接口（引入该组件的页面触发）组件在哪个生命周期钩子函数中请求接口数据呢？
前言 我开发了一个 A 页面,然后在 A 页面引入了一个组件 B ,我想在 B 组件中加载进来的时候执行一个后端请求,获取数据进行 B 组件渲染. 今天遇到这么一个问题,我写好的小程序 组件(comp ...
- 微信小程序 12 自定义组件
12.1 自定义组件的学习 排行榜的结构 我们可以 使用 recommendContainer.header 部分的 写法. 那么也就是说,它俩可以是 长的一毛一样的.那么 我们是否 可以 进行一个 ...
最新文章
- springboot 成员变量_springboot系列之04-提高开发效率必备工具lombok
- 线段树合并复杂度证明
- Java开发环境搭建详细步骤
- -9 逆序输出一个整数的各位数字_逆序对个数（归并排序）
- SQL2005中row_number( )、rank( )、dense_rank( )、ntile( )函数的用法(2)
- Direct3D Frustum裁剪原理
- 关于csdn 博客图片无法加载的问题！
- 【华为OD机试真题 JS】竖直四子棋
- 艾尔塔7号/Elta7
- OOP 概念的编程基础思想----我的感想
- iOS 获取当前的UIViewController
- java rmi tcp_Tomcat启动失败报错[RMI TCP Connection(4)-127.0.0.1] [RMI TCP Connection(3)-127.0.0.1]...
- ARIMA差分自回归移动平均模型--时间序列预测
- Qt 仿360悬浮球
- 探讨:电子商务网站用什么技术开发最好?
- 存储主控芯片亚洲新势力崛起
- 开源工具 — 有了这款免费的开源作图工具，我放弃了Visio
- python pcie通信_PCIe总线（协议简述）
- 端口镜像站群301蜘蛛强引+廉价域名泛站速收录堆量程序
- C# word或者excel保存或导出为PDF