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

简介: 【小程序】自定义组件的data、methods、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


相关文章
|
1月前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
1月前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
1月前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 (四十)
【微信小程序】-- 自定义组件总结 (四十)
|
1月前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - behaviors(三十九)
【微信小程序】-- 自定义组件 - behaviors(三十九)
|
1月前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
1月前
|
小程序 JavaScript
【微信小程序】之自定义九宫格展示row-grid(每行显示三个)
【微信小程序】之自定义九宫格展示row-grid(每行显示三个)
|
1月前
|
小程序 JavaScript
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
|
1月前
|
JSON 小程序 前端开发
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
微信小程序按需引入 vant 组件,自动清除项目中未使用的 vant 组件,减少代码包大小,避免因未使用到的 vant 组件触发隐私协议提交审核时被拒
37 1
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
|
22天前
|
小程序 安全
微信小程序自定义底部导航栏
微信小程序自定义底部导航栏
|
23天前
|
JSON 小程序 搜索推荐
微信小程序如何自定义tabbar
微信小程序如何自定义tabbar
18 3