微信小程序开发组件的使用(三)

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) {
   // 页面尺寸变化
 }
}


})
最新回复(0)
Google XML地图百度 XML地图Google txt地图百度 txt地图17社