小程序自定义组件

1、创建组件

wxml wxss js json

在js中 *

// Component/showToast/showToast.js

const app = getApp();
const { requestData } = require('../../utils/util');

Component({   //外部数据 从父组件传值
  /**
   * 组件的属性列表
   */
  properties: {
    isMask:{  // 最底层半透黑色遮罩显隐状态
      type:Boolean,
      value:false
    },
    isnoIs:{  // 不能给自己投票
      type: Boolean,
      value: false
    },
    isShut: {  // 是否确认投票
      type: Boolean,
      value: false
    },
    isjorn: {  // 参与过了
      type: Boolean,
      value: false
    },
    tpNameSplit: {
      type: String,
      value: ""
    },
    name: {    // 被投票人姓名
      type: String,
      value: ""
    }

  },

  /**
   * 组件的初始数据
   */
  data: {   //内部数据 初始化渲染

  },

  /**
   * 组件的方法列表
   */
  methods: {
    hideToast:function(){   //关闭所有弹窗 清除数据
       this.setData({
        isMask: false,
        isnoIs: false,
        isShut: false,
        isjorn: false,
        tpNameSplit: '',
        name: ''
       })
    }
})

2、引入组件

{
  "usingComponents": {
    "showToast": "../../Component/showToast/showToast"   //引入组件
  },
  "enablePullDownRefresh": true
}

3、父组件向子组件传参

在index.wxml中：

<showToast id='showToast'
    isMask = '{{componentShowToast.isMask}}'
    isnoIs='{{componentShowToast.isnoIs}}'
    isShut='{{componentShowToast.isShut}}'
    isjorn='{{componentShowToast.isjorn}}'
    name='{{componentShowToast.name}}'
    tpNameSplit='{{componentShowToast.tpNameSplit}}'></showToast>

在index.js中：

data{
    componentShowToast: {
        isMask: false,
        isnoIs: false,
        isShut: false,
        isjorn: false,
        tpNameSplit: '',
        name:''
    }
}

显而易见我们通过子组件的properties进行通信了（见标题1）