wx小程序 - 组件化 - 实例提示组件

如上两图所示，样式内容就是如此，其中不管是提示title还是提示内容还是下面的按钮都是不同的；这也算是第一次写微信小程序的组件，感觉就是，主要是数据传用和方法传用。数据是在properties中，注意自定义的值类型和传入的值类型要一致；方法主要是利用this.triggerEvent。

下面是代码
子组件wxml

<van-popup show="{{ show }}" round bind:close="onClose">
  <view class="tips-show-content">
    <view class="content-above">
      <view class="title">{{ content.title }}</view>
      <view class="content">{{ content.content }}</view>
    </view>
    <view class="content-btn">
      <view class="content-btn-cancell" bindtap="leftClick">{{ content.leftText }}</view>
      <view class="content-btn-confirm" bindtap="rightClick">{{ content.rightText }}</view>
    </view>
  </view>
</van-popup>

子组件js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    show: {
      type: Boolean,
      value: false
    },
    content: {
      type: Object,
      value: ''
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onClose(){
      this.setData({
        show: false
      });
    },
    leftClick(){ 
      this.triggerEvent('leftClick' )
    },
    rightClick(){
      this.triggerEvent('rightClick')
    }
  }
})

父组件wxml引用，记得在json中导入

// 注意这里的show - leftClick - rightClick和子组件中自己定义的要相同
<Tips show="{{ avatar_show }}" content="{{ tipContent }}" bind:leftClick="errorClick" bind:rightClick="comfirm" />

父组件js

data: {
        avatar_show: false, // 退出弹框
        tipContent: {  // 内容自定义
            title: '提示信息',
            content: '您确定要退出吗？',
            leftText: '点错了',
            rightText: '确定'
        }
    },
    //  如果像我一样左右的点击事件都是不同的，就在父组件里写，如果有都相同的，比如它的关闭onClose方法，就写在子组件中
    comfirm(){
        console.log('确认退出');
    },
    errorClick() {
        this.setData({
            avatar_show: false
        });
    },