小程序组件里的数据传递

先上一段官方文档

• 组件实例刚刚被创建好时， 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
  <c2b-customImg myString="{{myString}}"></c2b-customImg>

组件接受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 里、