组件
组件定义在
components文件夹下。
会在组件目录下的
.json中设置component: true，表示当前是组件。{ "component": true, "usingComponents": { } }
组件注册
// 语法格式
{
"usingComponents": {
"组件名": "组件路径"
}
}
全局组件
在
app.json中全局配置组件。
{
"usingComponents": {
"my-test2": "/components/test2/test2"
}
}
局部组件（推荐）
在页面的
.json中局部引入组件。
{
"usingComponents": {
"my-test2": "/components/test2/test2"
}
}
组件使用
在
.wxml中直接使用组件。
<!-- 在组件内容直接使用 -->
<my-test2></my-test2>
自定义组件样式
样式隔离
| styleIsolation 可选值 | 说明 |
|---|---|
| isolation | 默认值，表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响。 |
| app-shared | 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面。 |
| shared | 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。 |
// components/test/test.js
Component({
options: {
styleIsolation: "shared"
},
})
数据、方法和属性
data 存放数据，methods 存放方法，properties 是组件的对外属性，用来接收外部传递到组件的数据。
// components/test/test.js
Component({
// 组件的属性列表
properties: {
// 写法一：只设置类型，没有默认值
count: Number,
// 写法二：设置默认值
title: {
type: String,
value: '列表'
}
},
// 组件的初始数据
data: {
num: 1
},
// 组件的方法列表
methods: {
say() {
console.log('说话')
}
}
})
<!-- properties 传递参数 -->
<my-test2 :count="{
{1}}" :title='商品列表'></my-test2>
properties 和 data 的区别
properties属性 和 data 数据的用法一样，两者打印的值都相同。
- properties：更倾向于存储外部传递到组件中的数据；
- data：更倾向于存储组件的私有数据；
数据监听器
observers监听和响应任何属性和数据字段的变化，从而执行特定的操作。
// components/test/test.js
Component({
observers: {
'字段A, 字段2': function(字段A的新值, 字段B的新值) {
...
}
}
})
-
多个属性使用
...来代替，使用obj.的形式来调用。// components/test/test.js Component({ observers: { '字段A, ...': function(字段A的新值, obj.b的新值, obj.c的新值) { ... } } })