在小程序开发中，自定义组件是构建灵活、可复用界面的关键部分，而properties属性则是组件与外界交互的重要桥梁。今天，就让我们一起深入探索小程序自定义组件中properties属性的奥秘。
一、properties 属性基础认知
props（即properties的简称）是小程序组件的对外属性，主要用于接收外界传递到组件中的数据。在实际开发中，我们常常会使用属性节点的方式为自定义组件传递各种数据。那么组件内部是如何接收这些数据的呢？这就需要借助properties属性了。在自定义组件时，通过在组件的配置中添加properties，并声明可用的属性节点，组件就能接收外界传递的数据。比如声明一个max属性，外界就可以为该组件传递max对应的值。
声明properties属性有两种方式：
-
简化声明方式：简单地将属性名与值的类型对应。例如，若max属性的值类型为数字number，声明方式为max: number；若是字符串类型，写成max: string；布尔值类型则是max: boolean 。这种方式的优点是用法简单，但无法指定默认值。
-
完整声明方式：让属性名指向一个配置对象，该对象包含两个关键节点：type和value。type用于规定自定义属性的值类型，可选择number、string、boolean等；value则用于指定默认值。例如：
properties: {
max: {
type: Number,
value: 10
}
}
当外界没有传递max属性时，组件内max的值默认就是 10；若外界传递了max属性，那么就以传递的值为准。在实际开发中，开发者可根据需求选择合适的声明方式。如果需要指定默认值，建议使用完整声明方式。
二、实战操作：定义 properties 属性
接下来，我们通过实际操作来加深对properties属性定义的理解。假设我们有一个test组件，打开微信开发者工具，找到test组件的js文件，在其中的properties节点内部进行属性声明。
-
简化声明方式示例：
properties: {
// 简化声明方式，无法指定默认值
max: Number
} -
完整声明方式示例：
properties: {
// 完整声明方式，可指定数据类型和默认值
max: {
type: Number,
value: 10
}
}
在使用test组件的页面（如home页面）中，若未传递max值，组件内max就会使用默认值。若要传递max值，可以在页面的wxml文件中这样写：
<test max="100"></test>或者根据需求传递其他数字，传递的值会覆盖默认值。
三、properties 属性的应用场景：控制自增最大值
我们可以利用自定义的properties属性来实现一些业务逻辑。比如，在一个自增功能中，通过max属性控制自增的最大值。
假设在test组件内有一个点击加一的功能，点击按钮会调用a_count事件处理函数。在a_count函数内部添加如下逻辑：
methods: {
a_count() {
if (this.data.count >= this.properties.max) {
return;
}
this.setData({
count: this.data.count + 1
});
}
}这样，当count的值大于或等于max时，就不会再进行自增操作，从而实现了通过max属性控制自增最大值的功能。
四、properties 与 data 的区别与联系
在学习properties属性时，难免会和组件中的data进行比较。在传统的开发思维中，properties用于接收外界数据，是只读的，而data是组件内部可读可写的数据。但在小程序中，情况有所不同。
在小程序里，data和properties都是可读可写的，它们的用法相似，只是在功能上人为做了一些划分，properties更倾向于存储外界传递到组件中的数据。
我们可以通过一段代码来证明这一点：
在组件的wxml文件中添加一个按钮，并绑定show_info事件：
<button bindtap="show_info">show info</button>在对应的js文件的methods节点中定义show_info事件处理函数：
methods: {
show_info() {
console.log(this.data);
console.log(this.properties);
console.log(this.data === this.properties);
}
}运行小程序，点击按钮后，在调试器的console面板中可以看到，打印出的data和properties是两个完全一样的对象，并且this.data === this.properties的结果为true，这就证明了在小程序中组件的data和properties本质上是相同的。
五、使用 setData 修改 properties 的值
由于data和properties在本质上没有区别，所以properties属性的值不仅可以用于页面的渲染，还能使用setData为其重新赋值。
例如，在test组件的wxml文件中渲染max的值：
<view>max属性的值：{
{max}}</view>在test组件的js文件的a_count事件处理函数中，除了让count自增，还让max自增
methods: {
a_count() {
this.setData({
count: this.data.count + 1,
max: this.properties.max + 1
});
}
}运行小程序，点击加一按钮时，不仅count会自增，max的值也会跟着自增，这就验证了我们可以使用setData为properties里面的属性重新赋值。