目录
3.5. 使用 setData 修改 properties 的值
一、自定义组件
1.1 创建组件
注意：为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中，例如：
1.2 引用组件
组件的引用方式分为“局部引用”和“全局引用”，顾名思义：
- 局部引用：组件只能在当前被引用的页面内使用
- 全局引用：组件可以在每个小程序页面中使用
1.2.1 局部引用组件
在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”。示例代码如下：
1.2.2 全局引用组件
在 app.json 全局配置文件中引用组件的方式，叫做“全局引用”。示例代码如下：
1.2.3 全局引用 VS 局部引用
根据组件的使用频率和范围，来选择合适的引用方式：
- 如果某组件在多个页面中经常被用到，建议进行“全局引用”
- 如果某组件只在特定的页面中被用到，建议进行“局部引用”
1.3 组件和页面的区别
从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是，组件和页面的 .js 与 .json 文件有明显的不同：
- 组件的 .json 文件中需要声明 "component": true 属性
- 组件的 .js 文件中调用的是 Component() 函数
- 组件的事件处理函数需要定义到 methods 节点中
二、自定义组件的样式
2.1. 组件样式隔离
默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的 UI 结构，如图所示：
- 组件 A 的样式不会影响组件 C 的样式
- 组件 A 的样式不会影响小程序页面的样式
- 小程序页面的样式不会影响组件 A 和 C 的样式
好处：
2.2. 组件样式隔离的注意点
- app.wxss 中的全局样式对组件无效
- 只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响
建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！
2.3. 修改组件的样式隔离选项
默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项，用法如下：
2.4. styleIsolation 的可选值
| 可选值 |
默认值 |
描述 |
| isolated |
是 |
表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响 |
| apply-shared |
否 |
表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面 |
| shared |
否 |
表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件 |
三、自定义组件 - 数据、方法和属性
3.1. data 数据
在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中，示例如下：
3.2. methods 方法
在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中，示例代码如下：
3.3. properties 属性
在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下：
3.4. data 和 properties 的区别
在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
