微信小程序子组件分装方法，父组件调用

1.效果图

提示组件.png

2.实现步奏

1.定义子组件toast

图片.png

2.子组件中实现代码

//wxml文件中的代码
<!--conpoments/toast/toast.wxml-->
<view class='toast-box' hidden="{{toastShow}}">{{text}}
</view>
//toast是执行toast显隐的方法

//wxss文件中的代码
.toast-box {
  width: 320rpx;
  height: 100rpx;
  background-color: black;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 20rpx;
  color: white;
  line-height: 100rpx;
  text-align: center;
  color: white;
  font-size: 28rpx
}

//js中methods中执行的typeHidden执行的方法
 typeHidden(val,time) {
   
      this.setData({
        toastShow: !this.data.toastShow,
        text:val
      })
      // 备份this
      var that = this
      // 判断用户是否输入时间
      if (!time) {
        time = 3000
      }

      //执行延时器,使toas隐藏
      setTimeout(function() {
        that.setData({
          toastShow: !that.data.toastShow
        })
      },time)
    }

3.父组件调用子组件实现代码

//wxml文件中放入自定义的toast组件与点击出现的方法,这里需要注意给的ID
<toast id='toast'></toast>
<button size='mini' bindtap="showToast" type="primary">点我出现toast</button>

//js中执行的代码
//在页面加载的时候获取到toast组件的对象
onLoad: function (options) {
    this.toast = this.selectComponent("#toast")
  },

  // 执行showToast方法，使用弹框出现，并传递想传入的参数
  showToast() {
    // 执行子组件的方法
    this.toast.typeHidden("2秒后消失",2000)
  }