1.什么是自定义组件：页面中共有的功能模块抽取出来，可以提高代码复用性，有助于代码维护，编写方式与正常页面一致（包含业务逻辑）
2.应用场景：页面中模块拆分，共有模块抽取
3.组件开发与使用：
新建组件目录结构如下所示：
3.1开发自定义组件：
json文件: 使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径
{
"component": true,
"usingComponents": {}
}
js文件: 在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。
Component({
/**
* 组件的属性列表
*/
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
}
},
/**
* 组件的初始数据
*/
data: {
// 这里是一些组件内部数据
number: [1,2,3,4,5],
},
/**
* 组件的方法列表
*/
methods: {
// 这里是一个自定义方法
showNumber: function () {
console.info(this.data.number.toString());
}
}
})
wxml文件：
<view class="inner">
{{innerText}}
</view>
<view catchtap='showNumber'>点我呀</view>
<slot></slot>
3.2使用自定义组件：
json文件： 使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径
"usingComponents": {
"item-comp": "../../components/itemComp"
}
wxml文件:页面引用
<view>
<item-comp inner-text="这是自定义组件内容部分"></item-comp>
</view>
4.注意：引用自定义组件路径可以为绝对路径也可以是相对路径