1024程序员节 | 微信小程序开发之自定义组件相关知识点整理_小程序样式隔离

//在页面的.json文件中，引入自定义的组件并定义引用时的标签名
{
  "usingComponents": {
    //自定义组件的标签名字为my-test1
    "my-test1":"/components/test1/test1"
  },

//在页面的.wxml文件中使用刚刚自定义组件的标签名来引用自定义组件
<my-test1>使用自定义组件1</my-test1>

//.js文件中
Component({
     options:{
          //表示启用样式隔离
          styleIsolation:'isolated'
    }
})

//.json文件中
{
   "styleIsolation":"isolated"
}

// components/test1/test1.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    count:0
  },
})

// components/test1/test1.js
//点击按钮使count加1,并且控制其最大值为属性中的max值
Component({
   /**
   * 组件的初始数据
   */
  data: {
    count:0
  },
  /**
   * 组件的属性列表
   */
  properties: {
    //方法一：完整方式
     max:{
      type:Number,//参数类型
      value:0     //参数的默认值
     }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 点击事件的处理函数
    addCount(){
      if(this.data.count>=this.properties.max)return 
      this.setData({
        count:this.data.count+1
      })
      this._showCount()
    },
    // 自定义的方法建议以下划线开头以示区分
    _showCount(){
      // 打印消息框 
      wx.showToast({
        title: 'count值为：'+this.data.count,
        icon:"none"
      })
    },
  }
})

// components/test/test1.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //方法一：完整方式
     max:{
      type:Number,//参数类型
      value:0     //参数的默认值
     }
    //方法二：简化方式
    max:Number
  },
})

<my-test1 max="10"></my-test1>

Component({
 
      observer:{
          '字段A,字段B':function(字段A的新值,字段B的新值){
                  // do something
            }
      }
})

<!--components/test1/test1.wxml-->
<view>{{n1}}+{{n2}}={{sum}}</view>
<button bindtap="addN1" type="primary">n1+1</button>
<button bindtap="addN2" type="primary">n2+1</button>

// components/test1/test1.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
 
    },
 
    /**
     * 组件的初始数据
     */
    data: {
        n1:0,
        n2:0,
        sum:0
 
    },
 
    /**
     * 组件的方法列表
     */
    methods: {
        //n1+1
        addN1(){
            this.setData({
                n1:this.data.n1+1
            })
        },
        //n2+1
        addN2(){
            this.setData({
                n2:this.data.n2+1
            })
        }
    },
    //数据监听器。监听n1,n2的变化，自动计算sum
    observers:{
        'n1,n2':function(newN1,newN2){
            this.setData({
                sum:newN1+newN2
            })
        }
    }
})

"usingComponents": {
        "my-test1":"/components/test1/test1"
    }

<!--pages/home/home.wxml-->
<my-test1></my-test1>

Component({
 
      observer:{
          '对象.属性A,对象.属性B':function(属性A的新值,属性B的新值){
                  // do something
            }
      }
})

Component({
 
      observer:{
          '对象.**':function(obj){
                  this.setData({
                      某数据字段:`${obj.对象属性1},${obj.对象属性2}......`
                  })
                 
            }
      }
})

Component({
   options:{
    //这里示例指定所有以 _ 开头的数据字段为纯数据字段
    pureDataPattern:/^_/
   },
   data:{
      a:true,//普通字段
      _b:true,//将被设置为纯数据字段
   }
})

//定义组件生命周期函数的两种方式
Component({
     //推荐用法
     lifetimes:{
         attached(){ },
         detached(){ },
      }
     //旧的定义方式，与data节点平级
      attached(){ },
      detached(){ },
})

Component({
    pageLifetimes:{
         show:function(){ },//页面被展示
         hide:function(){ },//页面被隐藏
         resize:function(size){ },//页面尺寸发生变化
    }
})

<!-- 组件的封装者 -->
<view>
     <view>这是组件的内部节点</view>
     <!-- 下面对于不确定的内容可以使用<slot>插槽进行占位，后续由组件使用者进行填充 -->
     <slot></slot>
</view>
 
<!-- 组件的使用者 -->
<component-tag-name>
    <!-- 下面的内容将被放置到组件封装者定义插槽<slot>的位置 -->
    <view>这是插入到组件slot中内容</view>
</component-tag-name>

Component({
   options:{
     multipleSlots:true//启用多个插槽
   },
   properities:{/* ... */},
   methods:{/* ... */}
})

<!-- 页面模板，即组件的封装者 -->
<view>
     <!-- 这是name为slot1的第一个插槽 -->
     <slot name="slot1"></slot>
     <view>~~~~~~~分隔线~~~~~~~~~</view>
      <!-- 这是name为slot2的第二个插槽 -->
      <slot name="slot2"></slot>
</view>
 
<!-- 引用组件的页面模板，即组件的使用者 -->
<component-tag-name>
   <view slot="slot1">这是插入到名字为slot1插槽里面的内容</view>
   <view slot="slot2">这是插入到名字为slot2插槽里面的内容</view>
</component-tag-name>