小程序组件-生命周期相关
发布于 5 年前 作者 qiujuan 4609 次浏览 来自 问答

小程序组件文档说,组件和行为都具有独立的生命周期。当一个组件引用一个行为时,生命周期不会相互覆盖。当组件触发attached生命周期时,会依次触发行为的attached生命周期和组件的attached生命周期。

但是在运行demo时,发现确实引用了行为,但无法触发行为的attached函数,这是为什么?

my-behavior.js源码:

module.exports = Behavior({

behaviors: [],

properties: {

myBehaviorProperty: {

type: String,

value: ‘这是行为’

}

},

data: {

myBehaviorData: {}

},

attached: function () {

wx.showModal({

title: ‘提示’,

content: ‘这是行为的生命周期’

})

},

methods: {

myBehaviorMethod: function () { }

}

})

组件源码:

var myBehavior = require(’…/…/behaviors/my-behavior’)

Component({

behaviors: [myBehavior],

/**

  * 组件的属性列表

  */

relations: {

‘./tryNew’: {

type: ‘child’,

linked: function (target) {

// 每次有custom-li被插入时执行,target是该节点实例对象,触发在该节点attached生命周期之后

},

linkChanged: function (target) {

// 每次有custom-li被移动后执行,target是该节点实例对象,触发在该节点moved生命周期之后

},

unlinked: function (target) {

// 每次有custom-li被移除时执行,target是该节点实例对象,触发在该节点detached生命周期之后

}

}

},

properties: {

innerText: {

type:String,

// value:’’,

observer: ‘_propertyChange’

}

},

/**

  * 组件的初始数据

  */

data: {

someData:{}

},

// 生命周期函数,可以为函数,或一个在methods段中定义的方法名

attached: function () {

wx.showModal({

title: ‘提示’,

content: ‘这是组件的生命周期,’ + ‘这是行为里的属性:’ + this.properties.myBehaviorProperty,

})

},

moved: function () { },

detached: function () { },

/**

  * 组件的方法列表

  */

methods: {

onMyButtonTap: function () {

this.setData({

// 更新属性和数据的方法与更新页面数据的方法类似

})

},

_myPrivateMethod: function () {

// 内部方法建议以下划线开头

this.replaceDataOnPath([‘A’, 0, ‘B’], ‘myPrivateData’) // 这里将 data.A[0].B 设为 ‘myPrivateData’

this.applyDataUpdates()

},

_propertyChange: function (newVal, oldVal) {

console.log(“发生改变了”);

},

onTap: function(){

var myEventDetail = {} // detail对象,提供给事件监听函数

var myEventOption = {} // 触发事件的选项

this.triggerEvent(‘mycustomer’, myEventDetail, myEventOption)

}

},

/**

  * 组件配置

  */

options: {

multipleSlots: true // 在组件定义时的选项中启用多slot支持

},

})

实际运行效果,只弹出了组件的attached相关提示框:

回到顶部