组件
组件引用
局部引用组件
// 在页面的 .json文件 引入组件
{
"usingComponents": {
// 引入组件的命名 - 组件的路径
"my-test1": "/components/test1/test1"
}
}
<!-- 在wxml中,使用组件 -->
<my-test1></my-test1>
全局引用组件
// 在 app.json文件 引入组件
{
"pages": [...],
"window": {...}
"usingComponents": {
// 引入组件的命名 - 组件的路径
"my-test2": "/components/test2/test2"
}
}
<!-- 在wxml中,使用组件 -->
<my-test2></my-test2>
组件的区别
组件与页面都是由.js
,.json
,.wxml
,.wxss
四个文件组成
组件和.json
文件中需要声明"component":true
属性
组件的.js
文件中调用的是Component()
函数
组件的事件处理函数需要定义到methods
节点中
组件配置项
methods
组件内的事件处理函数和自定义方法需要定义到methods节点下
Component({
methods:{ // 组件的方法列表(包含事件处理函数和自定义方法)
addCount() { // 事件处理方法
this.setData({ count: this.data.count + 1 })
this._showCount() // 通过this直接调用自定义方法
},
_showCount() { // 自定义方法建议以_开头
wx.showToast({
title: 'count的值为' + this.data.count,
icon: 'none'
})
}
}
})
properties
Component({
properties: {
max:{ // 完整定义属性的方式(当需要指定属性默认值时)
type: Number, // 属性值的数据类型
value:10 // 属性默认值
},
max:Number // 简化定义属性的方式(不需要指定属性默认值时)
}
})
<my-test1 max="10"></my-test1>
注:
在小程序的组件中properties属性和data数据的用法相同,它们都是可读可写的,且指向同一个对象(data===properties
)
data更倾向于存储组件的私有数据
properties更倾向于存储外界传递到组件中的数据
由于data数据
和properties属性
在本质上没有任何区别,因此properties属性的值也可以用于页面渲染
或使用setData
为properties中的属性重新赋值
observers
数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作
Component({
observers: {
'属性A, 属性B': function(属性A的新值, 属性B的新值){
// code
}
}
})
数据监听器支持监听对象中单个或多个属性的变化
Component({
observers: {
'对象.属性A, 对象.属性B': function(属性A的新值, 属性B的新值){
// code
// 触发此监听器的情况
// 使用setData设置对象.属性A或对象.属性B时触发
// 使用setData设置对象时触发
}
}
})
纯数据
纯数据字段是指那些不用于界面渲染的data字段
当某些data中的字段既不会展示在界面上,也不会传递给其他组件,仅仅在当前组件内部使用
这种特性的data字段比较适合设置为纯数据字段,纯数据字段可以提升页面更新的性能
在Component
构造器的options
节点下,指定pureDataPattern
为一个正则表达式,
字段名符合这个正则表达式的字段将变成纯数据字段
Component({
options: {
// 指定所有 _ 开头的数据字段为纯数据字段
pureDataPattern: /^_/
},
data: {
a: true, // 普通数据字段
_b: false // 纯数据字段
}
})
组件样式
组件的样式隔离
默认情况下,自定义组件的样式只会对当前组件生效,不会影响到组件之外的UI结构
防止外界的样式影响组件内部的样式
防止组件的样式破坏外界的样式
注:
app.wxss中的全局样式对组件无效
只有class选择器会有样式隔离效果,id选择器,属性选择器,标签选择器不受样式隔离的影响
组件的隔离选项
自定义组件的样式隔离特性能防止组件内外样式互相干扰的问题
但也可以通过styleIsolation修改组件的样式隔离选项
// 在组件的 .js文件中新增如下配置
Component({
styleIsolation: 'isolated'
})
或
// 组件的 .json文件下新增配置
{
"styleIsolation": "isolated"
}
配置项
可选项 | 默认值 | 描述 |
---|---|---|
isolated | 是 | 表示启用样式隔离,在自定义组件内外,使用class指定的样式将不会相互影响 |
apply-shared | 否 | 表示页面wxss样式将影响到自定义组件,但自定义组件wxss中指定的样式不会影响页面 |
shared | 否 | 表示页面wxss样式将影响到自定义组件, 自定义组件wxss中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件 |