您的位置:首页 > 移动开发 > 微信开发

小程序自定义组件showToast

2019-01-18 11:18 483 查看
版权声明:署名-非商业性使用 转载请保留原文链接及作者。 https://blog.csdn.net/qq_40413396/article/details/86536817

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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: