小程序学习笔记：自定义组件的 properties 属性

在小程序开发中，自定义组件是构建灵活、可复用界面的关键部分，而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节点内部进行属性声明。

1. 简化声明方式示例：

   properties: {
   // 简化声明方式，无法指定默认值
   max: Number
   }

2. 完整声明方式示例：

   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里面的属性重新赋值。