自定义组件
从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。
创建自定义组件
类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）：
{ "component": true}同时，还要在 wxml 文件中编写组件模版，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见 组件模版和样式 。
代码示例：
!-- 这是自定义组件的内部WXML结构 --view class="inner" {{innerText}}/viewslot/slot/* 这里的样式只应用于这个自定义组件 */.inner { color: red;}注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。
组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。更多细节参见 Component构造器 。
代码示例：
Component({ properties: { // 这里定义了innerText属性，属性值可以在组件使用时指定 innerText: { type: String, value: 'default value', } }, data: { // 这里是一些组件内部数据 someData: {} }, methods: { // 这里是一个自定义方法 customMethod: function(){} }})使用自定义组件
使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：
{ "usingComponents": { "component-tag-name": "path/to/the/custom/component" }}这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。
代码示例：
view !-- 以下是对一个自定义组件的引用 -- component-tag-name inner-text="Some text"/component-tag-name/view自定义组件的 wxml 节点结构在与数据结合之后，将被插入到引用位置内。
Tips:
- 对于基础库的1.5.x版本， 1.5.7 也有部分自定义组件支持。
- 因为WXML节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
- 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用
usingComponents字段）。 - 自定义组件和使用自定义组件的页面所在项目根目录名不能以“wx-”为前缀，否则会报错。
- 旧版本的基础库不支持自定义组件，此时，引用自定义组件的节点会变为默认的空节点。
组件模版和样式
类似于页面，自定义组件拥有自己的 wxml 模版和 wxss 样式。
组件模版
组件模版的写法与页面模板相同。组件模版与组件数据结合后生成的节点树，将被插入到组件的引用位置上。
在组件模板中可以提供一个 slot 节点，用于承载组件引用时提供的子节点。
代码示例：
!-- 组件模板 --view class="wrapper" view这里是组件的内部节点/view slot/slot/view!-- 引用组件的页面模版 --view component-tag-name !-- 这部分内容将被放置在组件 slot 的位置上 -- view这里是插入到组件slot中的内容/view /component-tag-name/view注意，在模版中引用到的自定义组件及其对应的节点名需要在 json 文件中显式定义，否则会被当作一个无意义的节点。除此以外，节点名也可以被声明为抽象节点。
组件wxml的slot
在组件的wxml中可以包含 slot 节点，用于承载组件使用者提供的wxml结构。
默认情况下，一个组件的wxml中只能有一个slot。需要使用多slot时，可以在组件js中声明启用。
Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, properties: { /* ... */ }, methods: { /* ... */ }})此时，可以在这个组件的wxml中使用多个slot，以不同的 name 来区分。
!-- 组件模板 --view class="wrapper" slot name="before"/slot view这里是组件的内部细节/view slot name="after"/slot/view使用时，用 slot 属性来将节点插入到不同的slot上。
!-- 引用组件的页面模版 --view component-tag-name !-- 这部分内容将被放置在组件 slot name="before" 的位置上 -- view slot="before"这里是插入到组件slot name="before"中的内容/view !-- 这部分内容将被放置在组件 slot name="after" 的位置上 -- view slot="after"这里是插入到组件slot name="after"中的内容/view /component-tag-name/view组件样式
组件对应 wxss 文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点：
- 组件和引用组件的页面不能使用id选择器（
#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。 - 组件和引用组件的页面中使用后代选择器（
.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。 - 子元素选择器（
.a.b）只能用于view组件与其子节点之间，用于其他组件可能导致非预期的情况。 - 继承样式，如
font、color，会从组件外继承到组件内。 - 除继承样式外，
app.wxss中的样式、组件所在页面的的样式对自定义组件无效。
#a { } /* 在组件中不能使用 */[a] { } /* 在组件中不能使用 */button { } /* 在组件中不能使用 */.a .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */除此以外，组件可以指定它所在节点的默认样式，使用 :host 选择器（需要包含基础库 1.7.2 或更高版本的开发者工具支持）。
代码示例：
/* 组件 custom-component.wxss */:host { color: yellow;}!-- 页面的 WXML --custom-component这段文本是黄色的/custom-component外部样式类
有时，组件希望接受外部传入的样式类（类似于 view 组件的 hover-class 属性）。此时可以在 Component 中用 externalClasses 定义段定义若干个外部样式类。这个特性从小程序基础库版本 1.9.90 开始支持。
代码示例：
/* 组件 custom-component.js */Component({ externalClasses: ['my-class']})!-- 组件 custom-component.wxml --custom-component class="my-class"这段文本的颜色由组件外的 class 决定/custom-component这样，组件的使用者可以指定这个样式类对应的 class ，就像使用普通属性一样。
代码示例：
!-- 页面的 WXML --custom-component my-class="red-text" /.red-text { color: red;}Component构造器
Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。
最新资讯
-
抖音再现本地生活服务，咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地，每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级，打造了咫尺同城圈：“同城探店营销助手”，不仅完善商家营销技巧，还助力探店网红玩转本地生活服务。 -
抖音再现本地生活服务，咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地，每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级，打造了咫尺同城圈：“同城探店营销助手”，不仅完善商家营销技巧，还助力探店网红玩转本地生活服务。 -
阿坝小程序代理
阿坝藏族羌族小程序代理公司有哪些？阿坝藏族羌族小程序代理平台哪个好？阿坝藏族羌族小程序代理商怎么收费，代理政策如何？下面就让即速应用产品经理jisuapp.cn来告诉你吧！
热门模板
| 定义段 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| properties | Object Map | 否 | 组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数 |
| data | Object | 否 |