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) **