13.小程序组件的使用

<view class="global {{type ? 'show' : 'hide'}}">
  <view class="popup" wx:if="{{type == 'network'}}">
    <view class="title"> 网络异常 </view>
    <view class="text"> 网络异常，请检查网络情况</view>
    <button class="btn" bindtap="v_taptwo">
      <view class="main">
        <text>我知道了</text>
      </view>
      <view class="sub"></view>
    </button>
    <!--插槽的使用：在组件里可以使用<view></view>-->
        <slot />
  </view>
</view>

var log = console.log.bind(console)

let compObj = {
  properties: {
    page: {
      type: String,
      value: '',
    },
  },
  data: {
    //页面的取值
        type: '',
    someData:{}
  },
  methods: {
    show(popupName, someData) {
        var that = this
      console.log('popup组件被调用', popupName, someData)
//    someData這里是父级传过来的值
      this.setData({
        type: popupName,
        someData: someData || {},
//      page: someData.index,
      })
      log('父级传递的参数', that.data.type, that.data.someData, that.data.page)
    },

    hide() {
        var that = this
        //设置为空，就可以不显示了
        this.setData({
        type: '',
     })
   },
    v_taptwo(e) {
        var that = this
//      var a = e.target.dataset.index
            // detail对象，提供给事件监听函数。这个可以用来向父级传值
        var myEventDetail = {   
                    val: 1
      } 
        //触发成功回调
      this.triggerEvent("taptwo", myEventDetail);
    }
  }
}

Component(compObj)

在json文件中需要事前引入，页面中写

<!--弹窗的组件-->
        <god-popup id="id-god-popup" bind:taptwo="clickFather">
            <button bindtap="_cancelEvent1">点我关闭</button>   
        </god-popup>

//弹窗显示
that.selectComponent('#id-god-popup').show('network', {a : 1, b : 2})

//弹窗隐藏
    _cancelEvent1(){
        var that = this
        console.log('你点击了取消');
        
        that.selectComponent('#id-god-popup').hide()
    },

//弹窗传递给父级的值
    clickFather: function(e) {
        var that = this
        //e是传递过来的参数
        var clickFather = e.detail.val
        log(`clickFather: ${clickFather}`)
    },