网站建设与运营策划书,长春网站排名优化公司,关于门户网站建设讲话,瓷砖网站建设#x1f48c; 所属专栏#xff1a;【微信小程序开发教程】 #x1f600; 作 者#xff1a;我是夜阑的狗#x1f436; #x1f680; 个人简介#xff1a;一个正在努力学技术的CV工程师#xff0c;专注基础和实战分享 #xff0c;欢迎咨询#xff01; … 所属专栏【微信小程序开发教程】 作 者我是夜阑的狗 个人简介一个正在努力学技术的CV工程师专注基础和实战分享 欢迎咨询 欢迎大家这里是CSDN我总结知识的地方喜欢的话请三连有问题请私信 文章目录前言一、自定义组件 - 数据、方法和属性1、data 数据2、methods 方法3、properties 属性4、data 和 properties 的区别5、使用 setData 修改 properties 的值总结前言 大家好又见面了我是夜阑的狗本文是专栏【微信小程序开发教程】专栏的第33篇文章; 今天开始学习微信小程序的第17天开启新的征程记录最美好的时刻每天进步一点点。 专栏地址【微信小程序开发教程】 此专栏是我是夜阑的狗微信小程序开发过程的总结希望能够加深自己的印象以及帮助到其他的小伙伴。 如果文章有什么需要改进的地方还请大佬不吝赐教。 一、自定义组件 - 数据、方法和属性 前面已经学习了小程序中的自定义组件 – 创建与引用样式通过栗子了解到组件全局引用和局部引用以及组件和页面之间的区别还有页面、组件样式之间的隔离。接下来就来讲解一下另外一个自定义组件 - 数据、方法和属性。话不多说让我们原文再续书接上回吧。 1、data 数据 在小程序组件中用于组件模板渲染的私有数据需要定义到 data 节点中具体代码如下
test1.js
Component({/*** 组件的初始数据*/data: {count: 0},
})2、methods 方法 在小程序组件中事件处理函数和自定义方法需要定义到 methods 节点中这里通过按钮自加1的栗子来了解一下而且点击按钮时候还要有弹窗提示 count 值具体代码如下
test1.wxml
viewcount当前的值是{{count}}/view
button bindtapaddCount1/buttontest1.js 组件的方法列表可以包含事件处理函数和自定义方法一般自定义方法都建议以 _ 开头方便与事件处理函数进行区分。
Component({/*** 组件的方法列表*/methods: {// 点击事件处理函数addCount(){this.setData({count: this.data.count 1});this._showCount();},// 自定义方法_showCount(){wx.showToast({title: count值为 this.data.count,icon: none})}}
})当点击按钮就有弹窗提示当前 count 值可以来看一下运行效果 3、properties 属性 在小程序组件中properties 是组件的对外属性常用来接收外界传递到组件中的数据定义方式有以下两种
完整定义 完整定义方式是可以指定属性的数据类型和默认值。
Component({/*** 组件的属性列表*/properties: {max: {type: Number, // 属性值的数据类型value: 10 // 属性默认值},},
})简化定义 简化定义属性只是指定属性的数据类型而已。
Component({/*** 组件的属性列表*/properties: {max:Number },
})当需要知道属性默认值时建议使用完整定义属性而不需要指定属性默认值时可以使用简化方式。 这里以完整定义为例当点击按钮加到最大值时就不能在加了具体代码如下
message.wxml 给组件传递最大值参数
view/view
my-test1 max9/my-test1test1.js
Component({/*** 组件的方法列表*/methods: {// 点击事件处理函数addCount(){if(this.data.count this.properties.max) return;this.setData({count: this.data.count 1});this._showCount();},// 自定义方法_showCount(){wx.showToast({title: count值为 this.data.count,icon: none})}}
})当 count 累加到 9 时再点击按钮就不会生效了可以来看一下实际运行效果 4、data 和 properties 的区别 在 Vue 中 data 是组件的私有数据properties 是外界传到组件的数据同时对于组件来说data 是可读可写的而 properties 是只读的。 但在小程序的组件中properties 属性和 data 数据的用法相同它们都是可读可写的只不过
data 更倾向于存储组件的私有数据。properties 更倾向于存储外界传递到组件中的数据。 下面通过一个栗子来说明小程序中 data 和 properties都指向同一对象具体代码如下
test1.wxml
button bindtapshowInfoshowInfo/buttontest1.js 当 data 和 properties 的对比结果为 true 时说明这两者都指向同一个对象。
Component({/*** 组件的方法列表*/methods: {showInfo(){console.dir(this.data);console.dir(this.properties);console.dir(this.data this.properties);},}
})可以发现 data 和 properties 都打印出相同的值而且结果为 true 说明这两者都是可读可写的来看一下运行结果 5、使用 setData 修改 properties 的值 由于 data 数据和 properties 属性在本质上没有任何区别因此 properties 属性的值也可以用于页面渲染或使用 setData 为 properties 中的属性重新赋值具体代码如下
test1.wxml 在组件的 wxml 文件中使用 properties 属性的值。
viewmax属性的值是{{max}}/viewtest1.js 使用 setData 修改属性的值。
Component({/*** 组件的方法列表*/methods: {// 点击事件处理函数addCount(){if(this.data.count this.properties.max) return;this.setData({count: this.data.count 1,max: this.properties.max,});this._showCount();},}
})当点击 1 按钮的时候count 和 max 都会进行 1 操作可以来看一下运行效果 总结 感谢观看这里就是常用的视图容器类组件的介绍使用如果觉得有帮助请给文章点个赞吧让更多的人看到。 也欢迎你关注我。 原创不易还希望各位大佬支持一下你们的点赞、收藏和留言对我真的很重要 最后本文仍有许多不足之处欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正下期再见。 更多专栏订阅: 【LeetCode题解持续更新中】 【Java Web项目构建过程】 【微信小程序开发教程】⚽ 【JavaScript随手笔记】 【大数据学习笔记华为云】 【程序错误解决方法建议收藏】 【软件安装教程】 订阅更多你们将会看到更多的优质内容
