微信小程序【组件】

134 阅读2分钟
  • 定义:开发者可以将页面内的'功能模块'抽象成'自定义组件',以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。

  • 组件使用


1、 父组件 使用已注册的自定义组件前,首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径:

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

2、子组件 类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可将这一组文件设为自定义组件):

{
  "component": true
}
  • 组件传参和事件


1、父组件给子组件传参

<component-tag-name innerText="text"></component-tag-name>

2、子组件接参

Component({
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

3、子组件调用父组件事件

<component-tag-name bindmyevent="onMyEvent" />

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

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

4、父组件调用子组件事件 获取组件实例 可在父组件里调用 this.selectComponent ,获取子组件的实例对象。(插件的自定义组件将返回 null)

调用时需要传入一个匹配选择器 selector,如:this.selectComponent(".my-component")

  <my-component id="the-id" />
  const child = this.selectComponent('#the-id');
  child.methods()
  • 组件的生命周期

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

微信小程序官方文档