自定义组件
创建自定义组件
在根目录下创建 components 文件夹 下创建自定义的组件
引用自定义组件
// 在页面的 .json 文件中，引入组件
{
"usingComponents": {
"my-test1": "/components/test1/test1"
}
}
// 在页面的 .wxml 文件中，使用组件
<my-test1></mytest1>组件和页面的区别
-
组件中的 .json 文件中需要声明
“component”：true属性 -
组件的 .js 文件中调用的是
Component()函数 -
组件的事件处理函数需要定义到 methods 节点中
组件样式隔离
组件的样式不会影响组件之外的样式
注意：
-
app.wxss 定义的样式对组件样式无效
-
只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响
建议：在组件和引用组件的页面中建议使用 class 选择器，
不要使用 id、属性、标签选择器！
修改组件的样式隔离选项
通过 styleIsolation 修改组件的样式隔离选项
// 在组件的 .js 文件中新增如下配置
Component({
options:{
styleIsolation: 'isolated'
}
})
// 或在组件的 .json 文件中新增配置如下
{
"styleIsolation": "isolated"
}自定义组件的方法
自定义方法建议以 _ 开头
properties 属性
是组件的对外属性，用来接收外界传递到组件中的数据。
Component({
// 属性定义
properties: {
max: { // 完整定义属性的方式【当需要指定属性默认值时，建议使用此方式】
type: Number, // 属性值的数据类型
value: 10 // 属性默认值
},
max: Number // 简化定义属性的方式【不需要指定属性默认值时，可以使用简化方式】
}
})
<my-test1 max="10"></my-test1>data 和 properties 的区别
都是可读可写的。
-
data更倾向于存储组件的私有数据 -
properties更倾向于存储外界传递到组件中的数据
使用 setData 修改 properties 的值
Component({
properties: { max: Number }, // 定义属性
methods: {
addCount(){
this.setData({ max: this.properties.max + 1 }) // 使用 setData 修改属性的值
}
}
})数据监听器
类似于 vue 中的数据监听器
Component({
observers: {
'字段A, 字段B': function(字段A的新值, 字段B的新值){
// do something
}
}
})
Component({
observers: {
'rgb.**': function(obj){
this.setData({
fullColor: `${obj.r}, ${obj.g}, ${obj.b}`
})
}
}
})纯数据字段
指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段。
Component({
options: {
// 指定所有 _ 开头的数据字段为纯数据字段
pureDataPattern: /^_/
},
data: {
a: true, // 普通字段
_b: true, // 纯数据字段
}
}组件的生命周期
created 、 attached 、ready 、moved 、detached 、 error
created ：不能调用 setData；通常在这个生命周期函数中，只用于给组件的 this 添加一些自定义的属性字段。
attached：this.data 此时已初始化完毕；初始化的工作可以在这里进行（例如发请求获取初始数据）
detached：退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数；此时适合做一些清理性质的工作
lifetimes节点
Component({
lifetimes: {
created(){
// do something
},
attached(){
}
}
}组件所在页面的生命周期函数
show \ hide \ resize
pageLifetimes 节点
Component({
pageLifetimes: {
show: function(){}, // 页面被展示时
hide: function(){}, // 页面被隐藏时
resize: function(){} // 页面尺寸发生变化时
}
}
自定义组件的插槽
<slot> 插槽，占位符
单个插槽
在小程序中，默认每个自定义组件中只允许使用一个 <slot> 插槽
// 组件的封装者
<view>
<view>这里是组件的内部节点</view>
// 对于不确定的内容，可以使用 插槽 占位，具体内容由组件的使用者决定
<slot></slot>
</view>
<component-tag-name>
// 这部分内容将放置在组件 插槽 的位置上
<view>这里是插入到组件slot中的内容</view>
</component-tag-name>多个插槽
Component({
options: {
mulitipSlots: true // 在组件定义时的选项中启用多 slot 支持
},
})// 组件的封装者
<view>
<view>这里是组件的内部节点</view>
// 对于不确定的内容，可以使用 插槽 占位，具体内容由组件的使用者决定
<slot name="before"></slot>
<slot name="after"></slot>
</view>
<component-tag-name>
// 这部分内容将放置在组件 插槽 的位置上
<view slot="before">这里是插入到组件slot中的内容</view>
<view slot="after">这里是插入到组件slot中的内容</view>
</component-tag-name>