微信小程序组件化操作

上一次说了 template的使用
这次说个类似于template,也是官方说的 component 使用

创建一个最简单的组件

<view class="BackViewn">
<text>{{name}}</text>
</view>

// view/newa/newa.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    name:String
  },

  /**
   * 组件的初始数据
   */
  data: {
    // name:"哈哈哈"
  },

  /**
   * 组件的方法列表
   */
  methods: {

  },
  //数据监听
  observers: {
    'name': function(co) {
      // 在 numberA 或者 numberB 被设置时，执行这个函数
      console.log("监听",co)
      }
  },

  //子组件执行page的方法
  // this.triggerEvent('loadNext')
  // page中子组件上需要  bindloadNext 进行绑定

  //组件的生命周期
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html#%E5%AE%9A%E4%B9%89%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E6%96%B9%E6%B3%95

})

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html#%E5%AE%9A%E4%B9%89%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E6%96%B9%E6%B3%95

使用的时候 需要在page的json中

{
  "usingComponents": {
   "newa":"../../view/newa/newa"
  }
}

<newa name="{{item.name}}" bindloadNext="loadNexte">
</newa>

bindloadNext: 表示 当子组件使用 this.triggerEvent('loadNext') 能加载 page中 loadNexte这个方法