# 自定义组件
官方描述:
- 将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用
- 将复杂的页面拆分成多个低耦合的模块,有助于代码维护
其实与 vue2 的组件类似,只不过在 vue2 中更加强调的是父子、兄弟关系。
版本限制:
所有自定义组件相关特性都需要基础库版本 1.6.3 或更高
# 一、组件与页面
# 1、组件注册
全局注册:
- app.json
{
"pages": [],
"window": {},
// 引入组件
"usingComponents": {
"table-vant": "/components/table/table"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
局部注册:
- 页面.json 文件
{
// 默认时
// "usingComponents": {}
// 引入组件
"usingComponents": {
"table-vant": "/components/table/table"
}
}
# 2、组件结构组成
小程序中的组件文件结构看似相同,文件内容组成却有些许不同。
① 组件.json 文件
{
"component": true, // 重点:组件声明🎉(组件的标志)
"usingComponents": {}
}
② 组件.js 文件
Component({
properties: {
// 🚩 属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value'
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function () {}
}
})
通过微信开发者工具自动初始化的小程序组件.js 文件,与小程序页面相比,可以发现:
小程序页面 | 小程序组件 | |
---|---|---|
数据存储: | data | data、properties |
自定义事件: | Page({})内 | methods:{}内容 |
生命周期函数: | Page({})内 | lifetimes:{}内 |
③ 组件.wxml 文件
<!-- 页面中使用 -->
<table-vant inner-text="Some text"></table-vant>
# 3、数据、属性和方法
简单的说,小程序的自定义组件和 vue 组件更像了。
① 数据
properties 是对外属性:用于接收外界传递到组件的数据。
把它想象成 vue 中的 props 属性即可
data 是私有数据:用于组件模板渲染的私有数据。
Component({
properties: {
// 🚩 属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value'
}
},
data: {
// 这里是一些组件内部数据
someData: {}
}
})
<!-- 页面中使用 -->
<table-vant inner-text="Some text"></table-vant>
② 方法
在小程序组件方法中,可以分为:事件处理函数和自定义方法两大类
Component({
methods: {
// 1、事件处理函数
addCount() {
this.setData({
count: this.data.count + 1
})
// 调用自定义方法
this._showCount()
}
// 2、自定义方法(建议使用🚩_开头)
_showCount(){
wx.showToast({
title: 'count值为:' + this.data.count,
icon: 'none'
})
}
}
})
# 4、纯数据字段
纯数据字段是一些不用于界面渲染的 data 字段,可以用于提升页面更新性能。
纯数据字段要做到既不会展示在页面上,也不会传递给其他组件,仅仅在当前组件内使用。
代码示例:
Component({
options: {
pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
},
data: {
a: true, // 普通数据字段
_b: true // 纯数据字段
},
methods: {
myMethod() {
this.data._b // 纯数据字段可以在 this.data 中获取
this.setData({
c: true, // 普通数据字段
_d: true // 纯数据字段
})
}
}
})
<view wx:if="{{a}}"> 这行会被展示 </view> <view wx:if="{{_b}}"> 这行不会被展示 </view>
# 二、组件样式
# 1、样式隔离
① 图解:
![](https://blog-cloudbed.oss-cn-chengdu.aliyuncs.com/note-taking/20220924102812.png)
上面的图例很好的描述了组件和组件、组件和页面间样式的关系。
② 重点:
在 组件 wxss 中不应使用 ID 选择器、属性选择器和标签名选择器。因为这些选择器可以突破样式隔离防线,从而影响到外部页面/组件。
更多
通过测试,我们发现:
- 外部使用 id 选择器、属性选择器不会对组件内产生影响
- 但如果外部使用了标签选择器,则会对组件产生影响
# 2、隔离等级控制 ✨
默认情况下,小程序组件是开启样式完全隔离的,但我们可以通过styleIsolation
来修改组件样式的隔离等级。
styleIsolation 可选值:
可选值 | 说明 |
---|---|
isolated | 完全隔离 (默认) |
apply-shared | 页面样式会影响组件样式 |
shared | 解除隔离 |
配置如下:
① 方式 1
- 组件.js 文件
Component({
options: {
styleIsolation: 'isolated'
}
})
② 方式 2
- 组件.json 文件
{
"styleIsolation": "isolated",
"component": true,
"usingComponents": {}
}
# 3、更多
# 三、observers 监听器
小程序中的数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。
他的作用类似于 vue 中的 watch 监听器。
# 1、数据监听
示例 1:
让 num 的值始终等于 numberA + numberB
Component({
// 自定义组件 attached 生命周期函数
attached: function () {
this.setData({
numberA: 1,
numberB: 2
})
},
// 数据监听
observers: {
'numberA, numberB': function (numberA, numberB) {
// 在 numberA 或者 numberB 被设置时,执行这个函数
this.setData({
sum: numberA + numberB
})
}
}
})
示例 2:
Component({
observers: {
// 1、普通写法
'rgb.r, rgb,g, rgb.b': function (r, g, b) {
// 刷新颜色值
this.setData({
fullColor: `${r}, ${g}, ${b}`
})
}
// 2、高级✨写法
'rgb.**': function (obj) {
// 刷新颜色值
this.setData({
fullColor: `${obj.r}, ${obj.g}, ${obj.b}`
})
}
}
})
# 2、字段监听
数据监听器支持监听属性或内部数据的变化,可以同时监听多个。一次 setData 最多触发每个监听器一次。
Component({
observers: {
title: function (newVal, oldVal) {
console.log(newVal, oldVal)
},
'some.subfield': function (subfield) {
// 使用 setData 设置 this.data.some.subfield 时触发
// (除此以外,使用 setData 设置 this.data.some 也会触发)
subfield === this.data.some.subfield
},
'arr[12]': function (arr12) {
// 使用 setData 设置 this.data.arr[12] 时触发
// (除此以外,使用 setData 设置 this.data.arr 也会触发)
arr12 === this.data.arr[12]
},
'some.field.**': function (field) {
// 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
// (除此以外,使用 setData 设置 this.data.some 也会触发)
field === this.data.some.field
}
}
})