微信小程序——自定义组件

什么是微信小程序的自定义组件以及意义

自定义组件，类似于Vue中的组件概念（事件通信机制非常类似），将页面内的一些功能模块抽象成自定义组件，以便在不同的页面中重复使用，也可以将复杂的页面拆分成多个低耦合的模块，有助于代码的维护。

创建自定义组件

自定义组件和页面类似，也是需要四个部分组成。wxss，wxml，js，json

在自定义组件的js文件中，需要使用Component()来注册组件，并提供组件的属性定义、内部数据和自定义方法。

属性和内部数据都是被用于wxml的渲染，其中属性值是可由外部组件传入的。

如何使用自定义组件

怎样在一个具体的页面中使用自定义组件呢？首先，我们需要告诉页面我们引用了哪一个自定义组件，也就需要在页面的json中进行引用声明。如下所示，提供每个自定义组件的标签名以及对应的自定义组件的文件路径。

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

然后，我们在页面的wxml中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。如下所示：

注意事项

在组件wxss中不应该使用ID选择器、属性选择器和标签选择器
因为wxml节点标签名只能是小写字母，中划线和下划线组成，所以自定义组件也只能包含这些这些字符。
在properties定义段中，属性名采用驼峰写法（propertyName）；在wxml中，指定属性值的时候则对应使用连字符写法（component-tag-name property-name="attr name"），应用于数据绑定的时候采用驼峰写法（attr="propertyName"）
使用this.data可以获取内部数据和属性值，但不要直接修改它们，应该使用setData修改

组件模板

组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。

在组件模板中可以提供一个节点，用于承载组件引用时提供的子节点。
如下所示：



  这里是组件的内部节点



  
    
    这里是插入到组件slot中的内容

当然，也可以使用多个slot，如果使用多个slot的时候，组件需要指定slot的name属性，然后在使用组件的时候，使用slot属性将节点插入到不同的slot中上。
官方的例子如下：



  
  这里是组件的内部细节



  
    
    这里是插入到组件slot name="before"中的内容
    
    这里是插入到组件slot name="after"中的内容

组件样式

组件对应的wxss文件中的样式，只对组件中wxml生效，编写组件样式的时候，需要特别注意：

继承样式。如font、color，会从组件外继承到组件内。
除了继承样式外，app.wxss中的样式、组件所在页面的样式对自定义组组件无效。
子选择器（.a>.b）只能用于view组件与其子节点之间，用于其他组件可能导致非预期的结果

Component构造器

ComPonent构造器可用于定义组件，调用Component构造器的时候可以指定组件的属性、数据、方法等

组件间通信与事件

组件之间的基本通信方法有以下几种：

wxml数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容数据
事件：用于子组件向父组件传递数据，可以传递任何数据
如果以上两种方式还不足以满足需求，那么父组件还可以通过this.selectComponent方法获取子组件的实例对象，这样就可以直接访问组件中的任意数据和方法了。

下面就介绍通过事件进行通信
自定义组件触发事件
自定义组件触发事件的时候，需要通过triggerEvent方法，指定事件名称、detail对象和事件选项。官方例子如下：

Component({
  properties: {}
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

其中触发事件的选项包括：

调用组件，监听事件
引用组件的页面可以监听这些事件。如下：

Page({
  onMyEvent: function(e){
    e.detail // 自定义组件触发事件时提供的detail对象
  }
})