第一步:创建自定义组件
创建compoents目录,在该目录下创建要复用的组件,例如:dialog组件
其中dialo.js参数说明:
properties:接收父级传递过来的值
例如:
properties: {
title:{
type:String,
value:"标题"
},
content:{
type:String,
value:"内容"
},
cancelText:{
type:String,
value:"取消"
},
confirmText:{
type:String,
value:"确定"
}
}
第二步:如何引入组件
例如:在login页面中引入dialog组件
在dialog.json中引入
例如:
{
"usingComponents":{
"dialog":"/components/dialog/dialog"
}
}
然后再dialog页面上使用dialog组件:
例如:
<dialog id="dialog"
title="这是一个标题"
bind:confirmEvent="_queding"
bind:cancelEvent="_quxiao"
></dialog>
注意:
如何派发事件: this.triggerEvent('自定义事件名',要传递的数据);
triggerEvent相当于vue的$emit
例如: this.triggerEvent('confirmEvent',{name:"确定"});
如何监听事件:用bind监听派发过来的事件 相当于vue中的@
例如: bind:confirmEvent="_queding"
小程序支持单slot和多slot::与vue类似
参考:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
数据持久化:
cookie,H5本地存储(localstrorage,sessionStorage),webSql
网友评论