微信小程序自定义组件数据、方法和属性
一 data 数据
在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中，示例如下。
Component({
/**
* 组件的初始数据
*/
data: {
count: 0
}
})
二 methods 方法
在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中，示例代码如下。
Component({
methods: { // 组件的方法列表：包含事件处理函数和自定义方法
// 事件处理函数
addCount() {
if (this.data.count >= this.properties.max) return
this.setData({
count: this.data.count + 1,
max: this.properties.max + 1
})
// 通过 this 直接调用自定义方法
this._showCount()
},
_showCount() { // 自定义方法建议以 _ 开头
wx.showToast({
title: 'count是' + this.data.count,
icon: 'none'
})
}
}
})
三 properties 属性
在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下。
Component({
// 属性定义
properties: {
// 第一种方式：简化的方式：不需指定属性默认值时，可以使用简化方式
max: Number,
// 第二种方式：完整的定义方式
max: { // 完整定义属性的方式【当需指定属性默认值时，建议使用此方法】
type: Number, // 属性值的数据类型
value: 10 // 属性默认值
}
}
})
<my-test1 max="10"></my-test1>
四 data 和 properties 的区别
在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的，只不过：
data 更倾向于存储组件的私有数据。
properties 更倾向于存储外界传递到组件中的数据。
Component({
/**
* 组件的属性列表
*/
properties: {
// 完整的定义方式
max: {
type: Number,
value: 10
}
},
/**
* 组件的初始数据
*/
data: {
count: 0
},
/**
* 组件的方法列表
*/
methods: {
showInfo() {
console.log(this.data) // 输出结果：{count: 0, max: 10}
console.log(this.properties) // 输出结果：{count: 0, max: 10}
console.log(this.data === this.properties) // 结果为 true，证明 data 数据和 properties 属性在本质上是一样的，都是可读可写的。
}
}
})
五 使用 setData 修改 properties 的值
由于 data 数据和 properties 属性在本质上没有任何区别，因此properties 属性的值也可以用于页面渲染，可使用 setData 为 properties 中的属性重新赋值，示例代码如下。
// 在组件的 .wxml 文件中使用 properties 属性的值
<view>max属性的值是：{{max}}</view>
Component({
properties: {
max: {
type: Number,
value: 10
}
},
/**
* 组件的方法列表
*/
methods: {
// 点击事件处理函数
addCount() {
this.setData({ // 使用 setDate 修改属性的值
max: this.properties.max + 1
})
}
}
})
微信小程序自定义组件数据、方法和属性相关推荐
- 微信小程序自定义组件——数据监听器
1.概念:数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作.它的作用类似于 vue 中的 watch 侦听器.在小程序组件中,数据监听器的基本语法格式如下: Component({ ...
- 微信小程序自定义组件-树形数据表格（进阶版）
前言 一.下载引用 二.使用treegrid组件 三.使用文档 属性 事件 四.组件源码 利用递归思想编写的表格行--treegrid-treeline 树形表格--treegrid-treegrid ...
- 微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
- 微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
- 微信小程序--自定义组件（超详细 从新建到使用）
微信小程序–自定义组件 微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看 介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...
- 微信小程序自定义组件的基本使用
微信小程序自定义组件的基本使用 组件与模块类似,实现了功能的复用,提高开发速率,减少代码量 在开发过程中 , 总会遇到一些功能板块是相同或很类似的 .如两个不同页面都有搜索框 , 或者 导航栏等 . ...
- 小程序组件onload_微信小程序自定义组件(一)
好吧,突然发现学不完了,一下子,那就分开吧,由于时间太久,直接重新大致复习了一下 微信小程序自定义组件 微信小程序支持自定义组件 下方的目录 其中,components为组件目录,nodemodule ...
- 一步步教你实现微信小程序自定义组件
一步步教你实现微信小程序自定义组件 更新时间:2022年03月21日 11:12:34 作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...
- 【小程序】一文学会微信小程序自定义组件封装
一.什么是自定义组件 在实际开发过程中,经常会有代码复用的情况,即在不同的页面有类似结构的代码块,类似的代码反复出现,这样会增加代码维护成本,也会造成代码的高耦合,为了解决这一情况,微信小程序支持了更 ...
最新文章
- 提莫隐身+机器人能钩_航空工业官宣全新歼20正式亮相，可以隐身的变形金刚
- 每日一博 - CAS（Compare-And-Swap）原理剖析
- Obtaining the String
- 《零基础看得懂的C语言入门教程 》——（三）轻轻松松理解第一个C语言程序
- python名称与作用域_Python变量命名与作用域的坑
- left join嵌套selelct语句格式_SQL Formatting Rule 格式化行业规范
- PHP 结合redis实现高并发下抢购、秒杀
- 三合一交友盲盒系统微信小程序源码/免授权盲盒源码/脱单盲盒APP分销代理源码
- 笔录软件在linux系统,weblogic的在redhat linux下使用笔录
- sqoop1.99.6 mysql_Alex的Hadoop菜鸟教程:第6课Sqoop2安装教程
- TODS：从时间序列数据中检测不同类型的异常值
- 计算机领域国际顶级会议
- 爬虫demo——爬取电影天堂的资源，存储到本地json文件
- phpwind安装空白问题解决
- WSL gcc -m32 readdir 出错: Value too large for defined data type
- 软件测试实习生（3k）
- python知道三角形三边求面积(海伦公式)
- hostapd建立无线AP出现did not acknowledge association的解决办法
- 微信输出日志在电脑桌面
- MySQL数据库之管理工具（上）