在小程序中自定义弹窗组件

由于业务须要在小程序里加上不少的弹窗，就想写一个组件方便使用；

建立组件

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
    })
  }
复制代码

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