组件化设计——定义一个歌单组件

在小程序中提供了它组件化思路，将重构性多的模块进行组件化，可以节约我们的很多时间，也可以使用时更加方便快捷。

在目录上，右击选择新建component即新建了一个组件的部分。

1、引用

组件的引用是在.json中出现。
1、usingComponents的意思就是我们正在使用的组件。
名字是随意自己自定义的+路径即可。

2、在wxml中引用的话，就是直接引用定义的名字即可。

2、使用

在我们使用自定义组件的时候，在定义组件中.js，是可以自定义属性的，接受时需要制定指定对应类型，所以为type:object

并且通过自定义属性获取传过来的值，
在组件中设计中通过属性引用

3、数据监听器

在组件的脚本文件中，定义监听事件observers，在这里通过自定义属性获取到的数据来读取监听我们想要的数据。
而获取到的数据我们如果只是需要获取到的数据中的某一个单一数据，使用如下方法

observers: {
      ['playlist.playCount'](event){
        console.log(event);
      }
  },

这样输出的就是我们要的playlist中的playCount里边的数据

做数据格式化处理：

我们在组件的方法列表中定义了我们的方法，来获取我们当前的位数，并进行对应的缩减，注释如图。

之后在组件监听中进行引用this._tranNumber(event,2);
之后怎么将它从方法传到前台显示呢，肯定是做一个数据绑定，

但是单纯的this.setData({ playlist.playCount:this._tranNumber(event,2) })会导致程序出现死循环。所以这个时候我们需要一个中间变量来承担这个责任，替我们来传递这个过程。所以在data{}中我们定义了一个全局变量来接收，将数据绑定修改如下

this.setData({
          _playCount:this._tranNumber(event,2)
        })

将前台对应的playlist.playCount引用也修改成我们的_playCount即可。

重点还是在方法的书写上，我们只有书写出正确的方法，引用就很简单了。