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

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

下面是代码
子组件wxml

  
    
      {{ content.title }}
      {{ content.content }}
    
    
      {{ content.leftText }}
      {{ content.rightText }}
    
  

子组件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和子组件中自己定义的要相同

父组件js

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