wuqy-component/components/check-circle/index.js

这是一个微信小程序自定义组件库

// const eventBus = require("../../tools/eventBus").default;
import eventBus from "../../tools/eventBus";
import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
import { store } from "../../tools/store";
Component({
  options: {
    pureDataPattern: /^_/, // 指定所有 _ 开头的数据字段为纯数据字段
  },
  behaviors: ["wx://form-field", storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      numA: () => store.numA,
      numB: (store) => store.numB,
      sum: "sum",
    },
    actions: {
      update123: "update",
    },
  },
  /**
   * 组件的属性列表
   */
  properties: {
    text: {
      type: String,
      value: "",
    },
    resonance: {
      type: String,
      value: "",
    },
    rename: {
      type: String,
      value: "",
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    checked: false,
  },
  //数据监听器可以用于监听和响应任何属性和数据字段的变化
  observers: {},
  /**
   * 组件的方法列表
   */
  methods: {
    onChange: function (e) {
      //如果属性为空

      if (this.data.resonance != "") {
        eventBus.emit(this.data.resonance, { checked: false, name: "" });
      }
      //选定或取消的，跟随状态、数据、样式的更新。
      this.setData({
        checked: !this.data.checked,
      });
      //通过判断是否为选定状态来决定在表单提交的时候是否提交信息。
      if (this.data.checked) {
        /**
         * @todo 这里要求name是填的属性。
         * 使用_name先保存name的值，在下次选中时，再归还。
         */
        this.setData({
          name: this.data.rename,
        });
      } else {
        this.setData({
          name: "",
        });
      }
    },
  },
  lifetimes: {
    // 在组件实例进入页面节点树时执行
    attached: function () {
      //bind不像call或apply,bind是直接返回一个未调用的函数，虽然它们第一个参数都绑定this，只有bind不需要传递未调用函数的参数，call的第二个参数是未调用函数的参数，格式为参数列表，apply的第二个参数是类数组，同时call和apply方法会立即调用函数，而bind则不会。

      //resonance属性为意思为共鸣，即相互响应，名字相同的会加入同一个队列中，这样就能形成多列的多选队列。
      if (this.data.resonance != "") {
        eventBus.on(this.data.resonance, this.setData.bind(this));
      }
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
});