微信小程序开发组件的使用（三）

1、开发组件三要素

     properties  //相当于vue中的props接收属性
   triggerEvent   //相当于vue中的$emit
   slot    //和vue是类似的slot
    1.可以通过slot为自定义组件嵌入wxml结构
    2.默认一个自定义组件只能嵌入一个slot，如果嵌入多个slot必须要开启options中的multipleSlots
    
    例如：
    Component({
      options:{
        multipleSlots: true, // 在组件定义时的选项中启用多slot支持
      },
      ......
    }）
    
    3.用法：
     第一步：在自定义组件内部添加slot
        <slot name="插槽名称" />
        
        例如：<slot name="before" />
        
     第二步：在引入自定义组件的页面中内嵌wxml
     
     <Dialog>
        <view catchtap="play" slot="before">嵌入的第一个viewX</view>
        <view slot="after">嵌入的第二个view</view>
      </Dialog>
    ```

2、 自定义组件样式隔离问题 - 默认情况，自定义组件外部的样式不会污染到自定义组件内部的样式

    - 设置样式隔离的方法：

        1. 在组件的options中开启styleIsolation选项
                   Component({
          options:{
            styleIsolation: 'isolated'，//表示样式隔离，默认隔离
          },
          
        ```

        2. 通过外部样式类允许外部的某个类来影响自定义组件

        ```
        1.在自定义组件js中添加允许哪个外部类的自定义属性
        Component({
          externalClasses: ['my-bg']
        }）
        
        2.在引入页面的子组件上添加外部样式类属性
        
        <Dialog my-bg="bg"> </Dialog>
        
        3. 在子组件内部添加对应的外部样式类名
        
        <view class="my-bg">xxxx</view>
          
        ```

​ 3、组件的生命周期

​ created:组件创建完成,但不能setData

​ attached：在组件实例进入页面节点树时执行

​ ready:在组件在视图层布局完成后执行

​ detached:在组件实例被从页面节点树移除时执行

Component({
//组件的生命周期
lifetimes:{
   creaed() {},
   attached() {}, 
},
//组件与页面相关的生命周期
pageLifetimes: {
 show: function() {
   // 页面被展示
 },
 hide: function() {
   // 页面被隐藏
 },
 resize: function(size) {
   // 页面尺寸变化
 }
}


})