因为业务需要在小程序里加上很多的弹窗，就想写一个组件来实现；

创建组件

1. 新建文件夹component专门放组件，
2. 新建popup页面，在popup.json中设置：

{    "component": true}

表明它是一个组件，我们称之为“子组件”

3. 注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。（只使用class）

如何使用组件

便于区分，引用子组件的页面我们称之为“父组件，”
在父组件的json里先引用子组件：

{  "usingComponents": {    "component-tag-name": "path/to/the/custom/component"  }}

父组件传值给子组件

因为这个自定义的弹窗组件会应用于很多不同的页面，所以显示的弹窗标题也是不同的，这就是需要父组件给子组件自定义标题，也就是子组件的标题应该从父组件中接受到的。
子组件里：
wxml

<view class="page">  <view>{{popupTitle}}</view></view>

js

Component({  properties: {    // 这里定义了innerText属性，属性值可以在组件使用时指定    popupTitle: { //弹窗标题      type: String,      value: '默认值',     }  },})

父组件里：
wxml

<popup popup-title="{{pagetitle}}"/>

js

  data: {    pagetitle: '我是页面标题',}

. 在子组件中自定义值是以小驼峰的形式书写的，但是在父组件传的时候要以“-”连接。

子组件改变父组件的值

这个组件的显示和隐藏都是在父组件决定的，但是因为我这是一个全屏的弹窗，覆盖了整个屏幕，所以想要关闭弹框只能想办法在子组件的点击事件上想办法。
基本逻辑是这样的：
操作流程：打开页面- 点击弹框（弹出子组件）- 点击关闭（点击子组件关闭弹窗）
数据流程：打开页面-点击弹框（传入弹窗标题、点赞成功结果、其他参数）-点击关闭（在父组件上自定义组件，然后子组件关闭按钮监听onTap事件，点击子组件关闭按钮时，会通知父组件去改变状态）

逻辑：

1. 在子组件中给要触发的元素加 bindtap = 'onTap'
2. 然后通过在method中设置onTap函数
3. 在onTap中的triggerEvent中设置要触发父组件事件的函数名称
4. 父组件接收到字组件的消息，然后触发事件

具体参考：小程序-组件通信

子组件：
wxml

<view class="hide-btn" bindtap="onTap">×</view>

js

  methods: { //放自定义的方法    onTap: function () {      var myEventDetail = {} // detail对象，提供给事件监听函数      var myEventOption = {} // 触发事件的选项      console.log(`子组件：'向父组件发送通知，我要关闭弹窗'`)      this.triggerEvent('hidepopop', myEventDetail, myEventOption)    }  },

父组件
wxml

  <popup bindhidepopop="hidePopop" is-show-popup="{{isShowPopup}}" popup-title="{{popupTitle}}" popup-content="{{popupContent}}"/>

js

  hidePopop: function(e) {    console.log(e.detail) // 自定义组件触发事件时提供的detail对象    console.log('父组件：我接受到了子组件的关闭弹窗的通知！');    this.setData({      isShowPopup: true    })  }

参考小程序-自定义组件
代码地址：https://github.com/AnsonZnl/wx-component-popup

原著是一个有趣的人,若有侵权,请通知删除