开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
了解支付宝开放能力最新动态
和同城同行业凯发k8官方网娱乐官方的合作伙伴交流业务
与开放平台产研团队沟通
文档中心
小程序 
开发 > 框架 > 自定义组件 > 创建自定义组件 > 组件模板和样式
贡献者 5
收藏
订阅更新
我的文档
设置
与页面类似，自定义组件可以有自己的 axml 模板和 acss 样式。
示例代码
.axml 示例代码
axml 是自定义组件必选部分：
​
html
复制代码
<view ontap="onmyclick" id="c-{{$id}}" />
.js 示例代码
​
javascript
复制代码
// /components/index/index.js
component({
methods: {
onmyclick(e) {
console.log(this.is, this.$id);
},
},
});
注意：与页面不同，用户自定义事件需要放到 methods 里面。
插槽 slot
通过在组件 js 中支持 props，自定义组件可以和外部调用者交互，接受外部调用者传来的数据，同时可以调用外部调用者传来的函数，通知外部调用者组件内部的变化。但是这样还不够，自定义组件还不够灵活。除了数据的处理与通知，小程序提供的 slot 使得自定义组件的 axml 结构可以使用外部调用者传来的 axml 组装。外部调用者可以传递 axml 给自定义组件，自定义组件使用其组装出最终的组件 axml 结构。
默认插槽 default slot
示例代码：
​
调用者不传递 axml，示例如下：
​
页面输出：
调用者传递 axml，示例如下：
页面输出：
可以将 slot 理解为插槽，default slot 就是默认插槽，如果调用者在组件标签 之间不传递 axml，则渲染的是默认插槽。而如果调用者在组件标签 之间传递有 axml，则使用其替代默认插槽，进而组装出最终的 axml 以供渲染。
具名插槽 named slot
default slot 只能传递一份 axml。
复杂的组件需要在不同位置渲染不同的 axml，即需要传递多个 axml，此时需要 named slot。 使用 named slot 后，外部调用者可以在自定义组件标签的子标签中指定要将哪一部分的 axml 放入到自定义组件的哪个具名插槽中，而自定义组件标签的子标签中没有指定具名插槽的部分则会放入到默认插槽上。
如果仅传递了具名插槽，则默认插槽不会被覆盖。
示例代码：
只传递具名插槽，示例如下：
页面输出：
传递具名插槽与默认插槽，示例如下：
页面输出：
作用域插槽 slot-scope
通过使用 named slot ，自定义组件的 axml 要么使用自定义组件的 axml，要么使用外部调用者（例如页面）的 axml。 使用自定义组件的 axml，可以访问组件内部的数据，同时通过 props 属性，可以访问外部调用者的数据。
示例代码：
页面输出：
自定义组件通过 slot 使用外部调用者（例如页面）的 axml 时，却只能访问外部调用者的数据。
示例代码：
页面输出：
slot scope 使得插槽内容可以访问到组件内部的数据。
示例代码：
页面输出：
如上所示，自定义组件通过定义 slot 属性的方式暴露组件内部数据，页面使用组件时，通过 slot-scope 申明为作用域插槽，属性值定义临时变量名 props，即可访问到组件内部数据。
acss
和页面一样，自定义组件也可以定义自己的 acss 样式。acss 会自动被引入使用组件的页面，不需要页面手动引入。可查看 acss 语法。
自定义组件样式隔离
默认情况下，自定义组件的样式将对外产生影响。从基础库版本 2.7.2 开始，可以在自定义组件的 json 文件中配置 styleisolation，避免页面的样式影响到外部。例如：
该选项支持以下取值：
●apply-shared 表示 app.acss 样式以及其它（设置了 shared 的页面和其它自定义组件）的样式将影响到自定义组件，但自定义组件 acss 中指定的样式不会影响外部。
●shared（默认）表示 app.acss 样式以及其它（设置了 shared 的页面和其它自定义组件）的样式将影响到页面，自定义组件 acss 中指定的样式也会影响到外部。
非虚拟化组件节点
默认情况下，自定义组件是“虚拟的”，即会展示自定义组件内部的第一层节点。但有些时候，开发者希望这个节点是一个“非虚拟化的”，使用时可以在这个节点设置 id、class、style，就如同一个基础组件。 这个时候，可以将该自定义组件设置为“非虚拟化”。支持基础库 2.8.0、ide 3.2.3 及以上版本。
配置示例
支持两种方式配置，同时 js 的优先级高于 json。
:host 选择器
当开启 virtualhost: false 时，自定义组件可以使用 :host 选择器来指定该自定义组件的默认样式。支持基础库 2.8.0、ide 3.2.3 及以上版本。
外部样式类
有时，组件希望接受外部传入的样式类。此时可以在 component 中用 externalclasses 定义段定义若干个外部样式类。
基础库 2.8.5 开始支持外部样式类。
这个特性可以用于实现类似于 view 组件的 hover-class 属性：页面可以提供一个样式类，赋予 view 的 hover-class，这个样式类本身写在页面中而非 view 组件的实现中。
开启外部样式类
由于开发者在开发跨平台小程序时可能已经设置了 externalclasses 字段，但其实之前会无效（在其它平台会生效）。
为了避免产生非预期行为，故需要开发者显式开启外部样式类功能。
通过 component 构造器的 options 配置项设置 externalclasses: true 开启。同时，该功能仅用于自定义组件开启隔离。
示例代码
这样，组件的使用者可以指定这个样式类对应的 class，就像使用普通属性一样。
使用示例
下面通过一个示例演示 component2 的使用，具体代码可查看 。
本示例在 page 中 使用自定义组件 i1，并使用了小程序框架提供的如下关键技术：
●自定义组件体系 component2。
●axml 支持灵活的使用 slot。
●axml 中使用 sjs。
本示例初始渲染内容如下：
 控制台会依次打印：
说明：自定义组件创建阶段依次触发: oninit、derivedatafromprops、didmount 生命周期。
当点击 count button 的时候，页面渲染如下：

控制台依次打印：
说明：
●自定义组件更新阶段依次触发: derivedatafromprops、didupdate 生命周期。
●外部 props 变化会触发 derivedatafromprops。
点击 change scope slot value 按钮时，页面渲染如下：

控制台依次打印：
说明：自定义组件 data 变化也会触发 derivedatafromprops。
相关文档
●acss 语法
●
​
 上一篇：组件配置下一篇：组件对象 
相关问题
内容没有解决您的问题？您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝（杭州）信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助？
当前页面目录
网站地图