小程序组件onload_小程序组件里的数据传递

先上一段官方文档

组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。

在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。

在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

文档说绝大多数初始化工作都在 attached 生命周期进行，但是小程序组件数据分为组件的内部数据 data: {}和从页面传递过来的 properties: {}。但是有个问题是在组件的 attached 中无法拿到使用组件的页面中setData的值。

// 页面的js

data: {

myString: '这是页面初始的数据'

},

onLoad: function (options) {

this.setData({

mySrting: '这是页面setData后的数据',

})

}

给组件传递myString

// 页面的wxml

组件接受myString

properties: {

myString: {

type: String,

value: '组件里mySrting的默认值'

}

},

/**

* 组件的初始数据

*/

data: {

},

/**

* 组件的方法列表

*/

methods: {

},

lifetimes: {

created: function(){

console.log(this.properties.myString, 'created')

},

// "组件里mySrting的默认值" "created"

attached: function() {

// 在组件实例进入页面节点树时执行

console.log(this.properties.myString, 'attached')

},

// "这是页面初始的数据" "attached"

ready: function(){

console.log(this.properties.myString, 'ready')

},

// "这是页面setData后的数据" "ready"

detached: function() {

// 在组件实例被从页面节点树移除时执行

},

},

所以可以看出在组件里 mySrting 在created 取的是组件的默认值， attached取的是页面里 data 的初始数据，ready 取的才是页面 setData 之后的值。具体原理应该要研究下组件的生命周期函数的源码了，可能是在组件 attached 之后页面才 onLoad。反正直接在组件里使用 mySrting 就不会有这些问题，但如果想用页面 setData 后的 myString 来对组件的数据初始化，就只能放在组件的 ready 里而不能放在 attached 里、