小程序组件components

模板html

<!-- 组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部节点</view>
  <slot name="after"></slot>
</view>

模板json

{
  "component": true,
  "usingComponents": {}
}

模板css

/* components/component-tag-name.wxss 
组件对应 wxss 文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点：
  组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
  组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
  子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
  继承样式，如 font 、 color ，会从组件外继承到组件内。
  除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。
  组件可以指定它所在节点的默认样式，使用 :host 选择器
*/
#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */

:host{
  color:blueviolet;
}

模板js

// components/component-tag-name.js
Component({
  // externalClasses: ['my-class'], ///组件希望接受外部传入的样式类
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持(一般只支持一个)多个slot，以不同的 name 来区分。
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    sayHello(e){
      console.log(e,'hello')
    }
  }
})

引入页json文件

{
  "usingComponents": {
    "my-component": "/components/component-tag-name"
  }
}

引入页html

<!-- 引用组件的页面模版 -->
<view>
  <my-component>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
     <view slot="before">这里是插入到组件slot中的内容</view> 
     <view slot="after">这里是after插入到组件slot中的内容</view> 
  </my-component>
</view>

Component构造器https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html

数据传入components

组件html

注意：在 properties 定义段中，属性名采用驼峰写法（propertyName）；在 wxml 中，指定属性值时则对应使用连字符写法（component-tag-name property-name=”attr value”），应用于数据绑定时采用驼峰写法（attr=”{{propertyName}}”）。

Component({

  behaviors: [],

  properties: {
    myProperty: { // 属性名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer: function (newVal, oldVal) {
        // console.log(oldVal)
        // console.log(newVal)
         } // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
    },
    myProperty2: String // 简化的定义方式
  },
  data: {
    A: [{
      B: 'init data.A[0].B'
    }]
  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    onMyButtonTap: function () {
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
        myProperty: 'Test'
      })
    },
    _myPrivateMethod: function () {
      // 内部方法建议以下划线开头
      this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'
      this.applyDataUpdates()
    },
    _propertyChange: function (newVal, oldVal) {

    }
  }

})

引入页html

<my-component my-property="{{msg}}" />

triggerEvent 使用

组件js

// components/component-tag-name.js
Component({
  properties: {},
  methods: {
    onTap: function () {
      var myEventDetail = {a:111} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
}) 

引用页js

const app = getApp()

Page({
  data: {

  },
  myEventListener: function(e) {
    console.log(e.detail) 
  }
})

触发事件的选项包括：

选项名	类型	是否必填	默认值	描述
bubbles	Boolean	否	false	事件是否冒泡
composed	Boolean	否	false	事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部
capturePhase	Boolean	否	false	事件是否拥有捕获阶段

事件案例https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

behaviors行为https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html

字段的覆盖和组合规则
组件和它引用的 behavior 中可以包含同名的字段，对这些字段的处理方法如下：
如果有同名的属性或方法，组件本身的属性或方法会覆盖 behavior 中的属性或方法，如果引用了多个 behavior ，在定义段中靠后 behavior 中的属性或方法会覆盖靠前的属性或方法；
如果有同名的数据字段，如果数据是对象类型，会进行对象合并，如果是非对象类型则会进行相互覆盖；
生命周期函数不会相互覆盖，而是在对应触发时机被逐个调用。如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数只会被执行一次。