达维营-前端网小程序components组件:
Component({
behaviors: [],
properties: {
myProperty: { // 属性名
type: String,
value: ''
},
myProperty2: String // 简化的定义方式
},
data: {}, // 私有数据，可用于模板渲染
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () {
},
moved: function () {
},
detached: function () {
},
},
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () {
}, // 此处attached的声明会被lifetimes字段中的声明覆盖
ready: function () {
},
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () {
},
hide: function () {
},
resize: function () {
},
},
methods: {
onMyButtonTap: function () {
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
})
},
// 内部方法建议以下划线开头
_myPrivateMethod: function () {
// 这里将 data.A[0].B 设为 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
},
_propertyChange: function (newVal, oldVal) {
}
}
})uniap组件
| 小程序自定义组件 | Vue/uni-app | 描述 |
|---|---|---|
| created | onServiceCreated | 小程序的created触发时，可以访问子组件信息，而Vue的created访问不到，故需uni-app框架映射到其它时机（onServiceCreated）执行 |
| attached | onServiceAttached | 同上 |
| ready | mounted | Vue 生命周期 |
| moved | – | Vue中不存在该钩子，暂不支持转换 |
| detached | destroyed | Vue 生命周期 |
小程序的pageLifetimes（组件所在页面的生命周期）在Vue中是没有的，需要映射为uni-app封装的页面生命周期：
| 小程序自定义组件 | uni-app | 描述 |
|---|---|---|
| ready | onPageShow | 页面被展示时执行 |
| hide | onPageHide | 页面被隐藏时执行 |
| resize | onPageResize | 页面尺寸变化时执行 |
export default {
name: "xxxxx",
data() {
return {
};
},
props: {
},
onPageShow: function() {
},
onPageHide: function() {
},
onPageResize: function() {
},
methods: {
}
}