小程序开发（二）---自定义组件，组件引用外部样式及插槽（slot）

自定义组件

在小程序的components(组件)文件夹下新建一个文件夹，当然命名根据组件的功能，类型…来定义是最好的。

这里选择新建的component,直接输入你要创建的组件名称就可以，不需要后缀，创建完成后会自动生成相关文件的。
在.wxml文件中布局你要创建的组件

<view class="modal" hidden="{{!modalShow}}">
  <view class="panel">
    <i class="iconfont icon-quxiao" bind:tap="onClose"></i>
    <!-- slot插槽 -->
    <slot name="modal_content"></slot>
  </view>
</view>

在.wxss文件中写入组件所要用到的css样式

.modal{
  position: fixed;
  top:0;
  bottom: 0;
  left:0;
  right: 0;
  z-index: 999;
  text-align: center;
  background: rgba(0, 0, 0,0.6);
}
.panel{
  position: absolute;
  bottom: 0rpx;
  left: 0;
  width: 100%;
  min-height: 300rpx;
  box-sizing: border-box;
  background-color: #f8f8f8;
}
.modal .icon-quxiao{
  position: absolute;
  right: 10rpx;
  top:10rpx;
  padding-left: 20rpx;
}

在.js文件写组件的功能，及组件和页面交互所要传递参数等逻辑代码

如果你定义的这个属性有默认值的话，这样写就可以了

 properties: {
    modalShow:{
      type:Boolean,
      value:true
    }
  }

因为Boolean类型默认值为fals,所以上面代码中就简写了。

组件外部样式引用及插槽（slot）

  options:{
    styleIsolation:'apply-shared',
    multipleSlots:true
  },

在小程序开发中：默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。
styleIsolation：‘apply-shared’：简单来说就是，组件内部的wxss样式不会影响到你调用这个组件的页面，而这个页面的样式会影响到组件。（每个页面都是是可以引用到全局app.wxss这个样式类的，所以只要claas名字一样就可以影响到组件了。）
当然styleIsolation还有其他属性，详情查看小程序开发文档https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB

这里组件中用到了外部引入的iconfont图标，小程序如何引入iconfont图标请查看
https://blog.csdn.net/weixin_37624974/article/details/108770431

在小程序开发中:默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用.
multipleSlots：true ( 启用多slot支持)

如果启用了多slot支持，组件不管定义了几个插槽 slot 都必须有name属性，如果不启用，就不要写name属性，不然slot插槽就不会生效

组件调用

1，在.json文件中引入组件

2，.wxml

<view>
    <w-modal-pop  modalShow="{{modalShow}}">
     <view slot="modal_content">
        <button size="default" class="lgin" open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">获取用户授权信息</button>
      </view>
    </w-modal-pop>
</view>

3，.wxss

.lgin {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  height: 80rpx;
  background-color: #d43c33;
  color: #fff;
  margin: 110rpx;
}

4，.js
效果：