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

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

自定义组件,类似于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)
    }
  }
})

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


微信小程序——自定义组件_第1张图片

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





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

你可能感兴趣的