Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等
属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| options | object | 组件的选项 | ||
| externalClasses | array | 组件接受的外部样式类 | ||
| data | object | 组件的内部数据，和 properties 一同用于组件的模板渲染 | ||
| observers | object | 组件数据字段监听器，用于监听 properties 和 data 的变化 | ||
| methods | object | 组件的方法，包括事件响应函数和任意的自定义方法 | ||
| behaviors | array | 类似于mixins和traits的组件间代码复用机制 | ||
| created | object | 组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用 setData | ||
| attached | object | 组件生命周期函数-在组件实例进入页面节点树时执行 | ||
| ready | object | 组件生命周期函数-在组件布局完成后执行 | ||
| detached | object | 组件生命周期函数-在组件实例被从页面节点树移除时执行 |
// component.js
Component({
behaviors: [],
properties: {
myProperty: { // 属性名
type: String,
value: ''
},
myProperty2: String // 简化的定义方式
},
data: {}, // 私有数据，可用于模板渲染
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
detached: function () { },
},
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
ready: function() { },
methods: {
onMyButtonTap: function(){
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
})
},
// 内部方法建议以下划线开头
_myPrivateMethod: function(){
// 这里将 data.A[0].B 设为 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
},
_propertyChange: function(newVal, oldVal) {
}
}
})
定义段 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| type | - | 是 | 属性的类型 |
| value | - | 否 | Object |
| observer | Function | 否 | 属性值变化时的回调函数 |
示例代码：
Component({
properties: {
min: {
type: Number,
value: 0
},
min: {
type: Number,
value: 0,
observer: function(newVal, oldVal) {
// 属性值变化时执行
}
}
}
})
data 是页面第一次渲染使用的初始数据。 组件的数据有两个来源，内部的状态
示例代码：
<view>{{name}}</view>
<view>{{parentName}}</view>
Component({
properties: {
parentName: {
type: String,
value: 0
}
},
data: {
name: 'hello',
},
methods: {
changeName() {
this.setData({
name: "world"
})
}
}
})
自定义组件提供了四个生命周期函数:
生命周期 | 类型 | 描述 |
|---|---|---|
| created | object | 在组件实例刚刚被创建时执行（注意此时不能调用 setData?） |
| attached | object | 在组件实例进入页面节点树时执行 |
| ready | object | 在组件布局完成后执行 |
| detached | object | 在组件实例被从页面节点树移除时执行 |
示例代码：
Component({
properties: {
parentName: {
type: String,
value: 0
}
},
lifetimes: {
created: function () {
console.log("this is created");
},
attached: function () {
console.log("this is attached");
},
detached: function () {
console.log("this is detached");
},
ready() {
this.fetchData()
}
},
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
ready: function() { },
data: {
name: 'hello',
},
methods: {
fetchData() {
xhs.myRequest('***')
},
changeName() {
this.setData({
name: "world"
})
}
}
})
插槽最简单的用法就是默认插槽，它允许你像这样拓展组件的模板能力：
<your-component name="{{ parentName }}">
<h1>hello, i am slot1</h1>
<h1>hello, i am slot2</h1>
<h1>hello, i am slot3</h1>
<h1>hello, i am slot4</h1>
</your-component>
your-component 组件模板:
// your-component.xhsml
<view>
子组件模板，接收到父组件的 parentName 参数: {{ name }}
<slot></slot>
<view>
有时可能会有多个插槽组合使用的场景：
<your-component name="{{ parentName }}">
<block slot="header">
<text>i am header</text>
</block>
<block slot="body">
<text>i am body</text>
</block>
<block slot="footer">
<text>i am footer</text>
</block>
</your-component>
your-component 组件模板:
// your-component.xhsml
<view>
<slot name="header"></slot>
子组件模板，接收到父组件的 parentName 参数: {{ name }}
<slot name="body"></slot>
<slot name="footer"></slot>
<view>
和页面一样，自定义组件定义的样式，会自动被引入使用组件的页面，无须手动引入