类似于页面,一个自定义组件由json wxml wxss js 4个文件组成
1 在json文件中做自定义组件声明
{
"component": true
}
2 在wxml文件中编写组件模板,在wxss文件中加入组件样式
<view class="inner">
{{innerText}}
</view>
2.1 tip
001 组件wxss中的样式只作用于这个自定义组件
002 在组件wxss中不应该使用id选择器、属性选择器和标签选择器
3 在自定义组件的js文件中,需要使用Component()来注册组件,并提供组件的属性定义、内部数据和自定义方法
Component({
// 组件的对外属性,是属性名到属性设置的映射表
properties: {
innerText: {
type: String,
value: ‘‘,
observer(newVal, oldVal, changePath) {}
},
myProperty2: String
},
data: {},
methods: {}
})
4 使用自定义组件
4.1 在json文件中进行引用声明
{
"usingComponents": {
"component-tag-name": "path/component"
}
}
4.2 在页面的wxml中就可以像使用基础组件一样使用
<view>
<component-tag-name inner-text="some text"></component-tag-name>
</view>
5 注意
5.1 因为wxml节点标签名只能是小写字母、中划线和下划线组合,所以自定义组件的标签名也只能包含这些字符。
5.2 自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用usingComponents字段)。
5.3 自定义组件和页面所在项目根目录名不能以"wx-"为前缀,否则会报错。