自定义组件
1. 创建-注册-使用组件
组件介绍
小程序目前已经支持组件化开发,可以将页面中的功能模块抽取成自定义组件,以便在不同的页面中重复使用;
也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。
开发中常见的组件有两种:
- 公共组件:将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用
- 页面组件:将复杂的页面拆分成多个低耦合的模块,有助于代码维护
如果是公共组件,建议将其放在小程序的目录下的 components
文件夹中
如果是页面组件,建议将其放在小程序对应页面目录下,当然你也可以放到页面的 components
文件夹中
同时建议:一个组件一个文件夹,文件夹名称和组件名称保持一致
📌 注意事项:
- 自定义组件的需要在
json
文件中需要配置component
字段设为true
- 自定义组件通过
Component
构造器进行构建,在构造器中可以指定组件的属性、数据、方法等
创建自定义组件:
创建组件的步骤很简单,以公共组件为例,创建的步骤如下:
在小程序的目录下新建
components
文件夹在
components
文件夹上,点击右键,选择新建文件夹
,然后输入文件夹名称,我们建议文件夹的名称和组件的名称保持一致,这样方便后期对组件进行维护。我们这里新的的组件名称叫做:custom-checkbox
在新建的组件文件夹上,点击右键,选择
新建 Component
,然后输入组件的名称,组件的名称建议和文件夹保持一致此时就已经创建了一个功能组件
使用自定义组件
开发中常见的组件主要分为 公共组件 和 页面组件 两种,因此注册组件的方式也分为两种:
- 全局注册:在
app.json
文件中配置usingComponents
节点进行引用声明,注册后可在任意组件使用 - 局部注册:在页面的
json
文件中配置usingComponents
节点进行引用声明,只可在当前页面使用
在配置 usingComponents
节点进行引用声明时,需要提供自定义组件的标签名和对应的自定义组件文件路径,语法如下:
{
"usingComponents": {
"自定义组件的标签名": "自定义组件文件路径"
}
}
这样,在页面的 wxml
中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。
{
"usingComponents": {
"custom-checkbox": "/components/custom-checkbox/custom-checkbox"
}
}
<!--pages/index/index.wxml-->
<view>
<!-- 将导入的自定义组件当成标签使用 -->
<custom-checkbox
/>
</view>
2. 自定义组件-数据和方法
在组件的 .js 中,需要调用 Component
方法创建自定义组件,Component
中有以下两个属性:
data
数据:组件的内部数据
methods
方法:在组件中事件处理程序需要写到 methods
中才可以