小程序基础

自定义组件-Component构造器-定义段与示例方法

时间:2018/12/28 19:00:44  作者:互联网  来源:网络转载  查看:5013  评论:0
内容摘要:Component构造器定义段与示例方法Component构造器可用于定义组件,调用Component构造器时可以指定组件的属性、数据、方法等。定义段类型是否必填描述最低版本propertiesObject Map否组件的对外属性,是属性名到属性设置的映射表,属性设置中可包含三个...

Component构造器

定义段与示例方法

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

定义段 类型 是否必填 描述 最低版本
properties Object Map 组件的对外属性,是属性名到属性设置的映射表,属性设置中可包含三个字段, type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数  
data Object 组件的内部数据,和 properties 一同用于组件的模板渲染  
methods Object 组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用,参见 组件事件  
behaviors String Array 类似于mixins和traits的组件间代码复用机制,参见 behaviors  
created Function 组件生命周期函数,在组件实例刚刚被创建时执行,注意此时不能调用 setData ,参见 组件生命周期  
attached Function 组件生命周期函数,在组件实例进入页面节点树时执行,参见 组件生命周期  
ready Function 组件生命周期函数,在组件布局完成后执行,参见 组件生命周期  
moved Function 组件生命周期函数,在组件实例被移动到节点树另一个位置时执行,参见 组件生命周期  
detached Function 组件生命周期函数,在组件实例被从页面节点树移除时执行,参见 组件生命周期  
relations Object 组件间关系定义,参见 组件间关系  
externalClasses String Array 组件接受的外部样式类,参见 外部样式类  
options Object Map 一些选项(文档中介绍相关特性时会涉及具体的选项设置,这里暂不列举)  
lifetimes Object 组件生命周期声明对象,参见 组件生命周期 2.2.3
pageLifetimes Object 组件所在页面的生命周期声明对象,支持页面的 show 、 hide 等生命周期,参见 组件生命周期 2.2.3
definitionFilter Function 定义段过滤器,用于自定义组件扩展,参见 自定义组件扩展 2.2.3

生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件包含一些通用属性和方法。

属性名 类型 描述
is String 组件的文件路径
id String 节点id
dataset String 节点dataset
data Object 组件数据,包括内部数据和属性值
properties Object 组件数据,包括内部数据和属性值(与 data 一致)
方法名 参数 描述
setData Object newData 设置data并执行视图层渲染
hasBehavior Object behavior 检查组件是否具有 behavior (检查时会递归检查被直接或间接引入的所有behavior)
triggerEvent String name, Object detail, Object options 触发事件,参见 组件事件
createSelectorQuery   创建一个 SelectorQuery 对象,选择器选取范围为这个组件实例内
createIntersectionObserver   创建一个 IntersectionObserver 对象,选择器选取范围为这个组件实例内
selectComponent String selector 使用选择器选择组件实例节点,返回匹配到的第一个组件实例对象(会被 wx://component-export 影响)
selectAllComponents String selector 使用选择器选择组件实例节点,返回匹配到的全部组件实例对象组成的数组
getRelationNodes String relationKey 获取这个关系所对应的所有关联节点,参见 组件间关系
groupSetData Function callback 立刻执行 callback ,其中的多个 setData 之间不会触发界面绘制(只有某些特殊场景中需要,如用于在不同组件同时 setData 时进行界面绘制同步)

代码示例:

在开发者工具中预览效果

Component({

  behaviors: [],

  properties: {
    myProperty: { // 属性名
      type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: '', // 属性初始值(可选),如果未指定则会根据类型选择一个
      observer(newVal, oldVal, changedPath) {
        // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
        // 通常 newVal 就是新设置的数据, oldVal 是旧数据
      }
    },
    myProperty2: String // 简化的定义方式
  },
  data: {}, // 私有数据,可用于模板渲染

  lifetimes: {
    // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
    attached() { },
    moved() { },
    detached() { },
  },

  // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
  attached() { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show() { },
    hide() { },
    resize() { },
  },

  methods: {
    onMyButtonTap() {
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod() {
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange(newVal, oldVal) {

    }
  }

})

注意:在 properties 定义段中,属性名采用驼峰写法(propertyName);在 wxml 中,指定属性值时则对应使用连字符写法(component-tag-name property-name="attr value"),应用于数据绑定时采用驼峰写法(attr="{{propertyName}}")。



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