欢迎留言交流小程序问题
欢迎留言交流小程序问题
欢迎留言交流小程序问题
我们新建一个组件test作为测试,test组件的js代码为:
之前我们讲过,在properties里定义的是组件对外要开发的属性,在data里定义的是在组件里自己使用的私有的数据,对小程序组件基础不了解的,可以看我前面的文章,这是一个系列的 小程序里的自定义组件(一):基本概念
现在,我们在组件的properties里定义一个index为Number类型,在data里定义一个year为Number类型,定一个month为String类型,然后我们在组件的生命周期函数attached里打印出properties和data两个对象,我们看看里面的值。
我们看日志打印出来,发现两个奇怪的现象:1、对properties里index打印出来的默认值是0,而对data下面的year和month都打印出JavaScript两个内置函数,一个是String()、一个是Number()。2、不管我们打印的是this.properties还是打印this.data,他们的显示结果是一模一样的。其实我们在properties是没有定义year和month的,在data里,是没有定义index,为什么会这样呢?
首先我们解释一下f String()和f Number(),看到f,其实我们就会想到函数,所以我们打印出Number或者String的类型:console.log(typeof (Number)),发现他们是function,那为什么在properties里index打印出是0,在data里year打印出来是一个函数呢?其实在小程序里,对properties里的数据做了处理,对data里的数据没做处理。
如上图:现在我们做个测试,我们给data里year设置了一个初始值0,给month设置了一个初始值“”,这样打印出日志,发现就正常了。
所以,得出一个结论:如果我们想对data里的数据做初始化,我们必须自己给他初始值。
现在我们解释一下现象2:不管我们打印的是this.properties还是打印this.data,他们的显示结果是一摸一样的。其实我们在properties是没有定义year和month的,在data里,是没有定义index,为什么会这样呢?
其实在小程序里,properties和data指向的是同一个js对象,换一种说法,我们可以理解为:小程序会把properties对象和data对象合并成一个对象,这样不管我们打印的是this.properties还是打印this.data,他们的显示结果是一摸一样的。
如上图,现在我们再做一个测试,现在我们在data里再定义一个index,把它初始值设为12,我们打印日志,发现index打印出来还是0.
所以我们得出一个结论:我们不要把data和properties里的变量设置成同一个名字,如果他们名字相同,properties里的会覆盖data里的。
欢迎阅读我的关于小程序组件的一系列文章