小程序基础

自定义组件-Component构造器-使用 Component 构造器构造页面

时间:2018/12/28 19:02:16  作者:互联网  来源:网络转载  查看:4919  评论:0
内容摘要:使用 Component 构造器构造页面事实上,小程序的页面也可以视为自定义组件。因而,页面也可以使用 Component 构造器构造,拥有与普通组件一样的定义段与实例方法。但此时要求对应 json 文件中包含 usingComponents&nbs...

使用 Component 构造器构造页面

事实上,小程序的页面也可以视为自定义组件。因而,页面也可以使用 Component 构造器构造,拥有与普通组件一样的定义段与实例方法。但此时要求对应 json 文件中包含 usingComponents 定义段。

此时,组件的属性可以用于接收页面的参数,如访问页面 /pages/index/index?paramA=123&paramB=xyz ,如果声明有属性 paramA 或 paramB ,则它们会被赋值为 123 或 xyz 。

页面的生命周期方法(即 on 开头的方法),应写在 methods 定义段中。

代码示例:

{
  "usingComponents": {}
}
Component({

  properties: {
    paramA: Number,
    paramB: String,
  },

  methods: {
    onLoad() {
      this.data.paramA // 页面参数 paramA 的值
      this.data.paramB // 页面参数 paramB 的值
    }
  }

})

Bug & Tips:

  • 使用 this.data 可以获取内部数据和属性值,但不要直接修改它们,应使用 setData 修改。
  • 生命周期函数无法在组件方法中通过 this 访问到。
  • 属性名应避免以 data 开头,即不要命名成 dataXyz 这样的形式,因为在 WXML 中, data-xyz="" 会被作为节点 dataset 来处理,而不是组件属性。
  • 在一个组件的定义和使用时,组件的属性名和 data 字段相互间都不能冲突(尽管它们位于不同的定义段中)。
  • 从基础库 2.0.9 开始,对象类型的属性和 data 字段中可以包含函数类型的子字段,即可以通过对象类型的属性字段来传递函数。低于这一版本的基础库不支持这一特性。
  • bug : 对于 type 为 Object 或 Array 的属性,如果通过该组件自身的 this.setData 来改变属性值的一个子字段,则依旧会触发属性 observer ,且 observer 接收到的 newVal 是变化的那个子字段的值, oldVal 为空, changedPath包含子字段的字段名相关信息。


相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |