1.我们要实现如下图功能小程序一个公共的弹出组件，首先我们创建一个pop文件然后在生成的pop.json文件中将component定义为true

{"component":true}

2.为pop.wxml添加内容

!--pages/common/pop/pop.wxml--viewclass='wx_dialog'hidden="{{!isShow}}"viewclass='wx-mask'/viewviewclass='wx-dialog-content'viewclass='wx-dialog-title'{{title}}/viewviewclass='wx-dialog-contents'{{content}}/viewviewclass='wx-dialog-footer'viewclass='wx-dialog-btn'catchtap='_cancelEvent'{{cancelText}}/viewviewclass='wx-dialog-btn'catchtap='_confirmEvent'{{confirmText}}/view/view/view/view

3.pop.wxss

/*pages/common/pop/pop.wxss*/.wx_dialog{position:fixed;left:0;right:0;top:0;bottom:0;}.wx-mask{position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.3);z-index:99;}.wx-dialog-content{position:absolute;background:#fff;left:50%;top:50%;transform:translate(-50%,-50%);width:80%;/*height:200px;*/padding-bottom:60px;z-index:100;border-radius:5px;}.wx-dialog-contents{padding:10px;}.wx-dialog-title{padding:5px10px;font-size:14px;}.wx-dialog-footer{position:absolute;left:0;right:0;bottom:0;font-size:14px;height:40px;line-height:40px;border-top:1pxsolid#eee;}.wx-dialog-btn{display:inline-block;width:49%;cursor:pointer;text-align:center;}.wx-dialog-btn:first-child{border-right:1pxsolid#eee;}

4.pop.js

//pages/common/pop/pop.jsComponent({options:{multipleSlots:true//在组件定义时的选项中启用多slot支持},/***组件的属性列表*用于组件自定义设置*/properties:{//弹窗标题title:{//属性名type:String,//类型（必填），目前接受的类型包括：String,Number,Boolean,Object,Array,null（表示任意类型）value:'标题'//属性初始值（可选），如果未指定则会根据类型选择一个},//弹窗内容content:{type:String,value:'弹窗内容'},//弹窗取消按钮文字cancelText:{type:String,value:'取消'},//弹窗确认按钮文字confirmText:{type:String,value:'确定'}},/***私有数据,组件的初始数据*可用于模版渲染*/data:{//弹窗显示控制isShow:false},/***组件的方法列表*更新属性和数据的方法与更新页面数据的方法类似*/methods:{/***公有方法*///隐藏弹框hideDialog(){this.setData({isShow:!this.data.isShow})},//展示弹框showDialog(){this.setData({isShow:!this.data.isShow})},/***内部私有方法建议以下划线开头*triggerEvent用于触发事件*/_cancelEvent(){//触发取消回调this.triggerEvent("cancelEvent")},_confirmEvent(){//触发成功回调this.triggerEvent("confirmEvent");}}})

5.在父级页面的.js文件中添加

/***生命周期函数--监听页面初次渲染完成*/onReady:function(){this.dialog=this.selectComponent("#dialog");},showDialog(){this.dialog.showDialog();},//取消事件_cancelEvent(){console.log('你点击了取消');this.dialog.hideDialog();},//确认事件_confirmEvent(){console.log('你点击了确定');this.dialog.hideDialog();},

6.父级页面的.json文件中添加

{"usingComponents":{"pop":"../common/pop/pop"}}

7.在父级页面的.wxml文件中添加

viewclass="pop"popid='dialog'title='我是标题'content='恭喜你，学会了小程序组件'cancelText='知道了'confirm='谢谢你'bind:cancelEvent="_cancelEvent"bind:confirmEvent="_confirmEvent"/pop/view

8.然后就大功告成了转自：https://www.cnblogs.com/kdcg/p/9115778.html