开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用。也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。
创建自定义组件
类似于页面,一个自定义组件由 json
、tyml
、tyss
和 js
4 个文件组成。要编写一个自定义组件,首先需要在 json
文件中进行自定义组件声明,将 component
字段设为 true
,可将这一组文件设为自定义组件。
{
"component": true
}
同时,还要在 tyml
文件中编写组件模板,在 tyss
文件中加入组件样式,它们的写法与页面的写法类似。具体细节和注意事项,参见 组件模板和样式。
示例代码:
<!-- 这是自定义组件的内部TYML结构 -->
<view class="inner">
{{innerText}}
</view>
<slot></slot>
/* 这里的样式只应用于这个自定义组件 */
.inner {
color: red;
}
在自定义组件的 js
文件中,需要使用 Component()
来注册组件,并提供组件的属性定义、内部数据和自定义方法。
组件的属性值和内部数据将被用于组件 tyml
的渲染,其中,属性值可由组件外部传入。更多细节参见 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"
}
}
这样,在页面的 tyml
中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。
示例代码:
<view>
<!-- 以下是对一个自定义组件的引用 -->
<component-tag-name inner-text="Some text"></component-tag-name>
</view>
自定义组件的 tyml
节点结构在与数据结合之后,将被插入到引用位置内。