小程序自己定义组件的理解

Component 构造器https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html
创建自定义组件首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：
{ “component”: true}
注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

在自定义组件的 js 文件中，需要使用 Component() 来构造组件，并提供组件的属性定义、内部数据和自定义方法。
看例子自定义组件在components目录下 例如自定义一个名字为abc的组件

  <!--内部数据，和 properties 一同用于组件的模板渲染
  bind:tap 和 bindtap 作用一样
  内部方法建议以下划线开头如_myPrivateMethod -->
  <view>{{myProperty}}</view>
  <button bind:tap='onMyButtonTap'>Button</button>
  <view>{{A[0].B}}</view>
  <button bindtap='_myPrivateMethod'>_myPrivateMethod</button>

Component({
  properties: {   //properties定义组件的对外属性也就是用来接收父页面的数据，使用时直接赋值就可以如<abc myProperty="{{要传递的数数名}}"/>
    myProperty: { // 属性名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer: function (newVal, oldVal) { } // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
    },
    myProperty2: String // 简化的定义方式
  },
  data: {   //data定义组件的内部私有数据，可用于模版渲染
    A: [{
      B: 'init data.A[0].B'
    }]
  }, 
  ready: function() { }, // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  //methods定义组件的方法，
  methods: { 
     onMyButtonTap: function () {
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
        myProperty: 'Test'
      })
      //triggerEvent方法用来让父页面确发事件并传递数据给父页面
     this.triggerEvent('mchange', this.data.myProperty);
     //这里让父页面确发mchange事件，并传递myproperty的值
    },
    _myPrivateMethod: function () {
      // 内部方法建议以下划线开头，replaceDataOnPath是wx的内部方法可以直接修改对象key的值，applyDataUpdates将修改后的数据显示到页面相当于setData
      this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'
      this.applyDataUpdates()
     },
     //定义监听属值的变化的方法第一个参数是新值，第二个参数是旧值，只要上面observer改成observer:" _propertyChange"
    _propertyChange: function (newVal, oldVal) {
	console.log (newVal, oldVal)
    }
  }

})

使用自定义组件
使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：
“usingComponents”: {
“abc”: “…/components/abc”
}
这样在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

  <view>
  <!-- 以下是对一个自定义组件的引用 -->
  <abc myProperty="myPropert是自定义组件的属性被直接赋值" bind:mchange="cmchange"></abc>
</view>

//点击组件上的MyButton按钮触发mchange,并调用些方法
  cmchange:function(e){
    console.log ("数据",e.detail)//e.detail // 自定义组件触发事件时提供的detail对象
  }

细节注意事项
一些需要注意的细节：

因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。