【小程序】自定义组件的data、methods、properties

刺骨的言语ヽ痛彻心扉 2024-03-30 12:08 66阅读 0赞

**目录**

自定义组件 - 数据、方法和属性

1. data 数据

2. methods 方法

3. properties 属性

4. data 和 properties 的区别

5. 使用 setData 修改 properties 的值

## 自定义组件 - 数据、方法和属性 ##

### 1. data 数据 ###

在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中，示例如下：![b20033fcd0704d64836b306abf8794bc.png][]

### 2. methods 方法 ###

在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中，示例代码如下：

![6ac6f6cc86aa4944ab15435fe92756cf.png][]

### 3. properties 属性 ###

在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如

下：

![cba9e4e424ae404d97b962e464463f8a.png][]

### 4. data 和 properties 的区别 ###

在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的，只不过：

data 更倾向于存储组件的私有数据

properties 更倾向于存储外界传递到组件中的数据

![f2db25c3c2424e62ba23d3a7a0415b48.png][]

### 5. 使用 setData 修改 properties 的值 ###

由于 data 数据和 properties 属性在本质上没有任何区别，因此 properties 属性的值也可以用于页

面渲染，或使用 setData 为 properties 中的属性重新赋值，示例代码如下：

![9f6e640f423344c481f6cab49b47a5e4.png][]

[b20033fcd0704d64836b306abf8794bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/083792435f474c45ac70172ea8f20e24.png
[6ac6f6cc86aa4944ab15435fe92756cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b1ca72799fe74588ab9f39a2177171b5.png
[cba9e4e424ae404d97b962e464463f8a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/941fd5fd62864c2a8c9f1f97948419c2.png
[f2db25c3c2424e62ba23d3a7a0415b48.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7b6189d216874090bf2a2b4fa85d6830.png
[9f6e640f423344c481f6cab49b47a5e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/287fd6bddbd048bd9089644a2f622370.png