微信小程序 自定义组件

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

使用方法

一、

创建一个Component 页面
一个自定义组件由 json wxml wxss js 4个文件组成
在 wxml wxss 中进行组件的样式编写

二、

在自定义组件 js中 properties 进行自定义组件的属性编写

 properties: {
        // 属性名称
        label:{
        //类型
            type:String,
        //默认值
            value:''
        },
     
        count:{
            type:Number,
            value:0
        },
        max:{
            type:Number,
            value:999
        },
        min:{
            type:Number,
            value:0
        }

自定义组件 wxml 页面

//label 为数据绑定
<view class="label">{{label}}</view>
<view class="shop">
        <view class="label">{{label}}</view>
        <view class="btns">
            <view class="btn" bindtap="jian">-</view>
            <view class="count">{{count}}</view>
            <view class="btn" bindtap="jia">+</view>
        </view>
</view>

自定义组件js 页面

   // methods l里面主要写方法
    methods: {
      //减方法
        jian(){
            //count 值小于min值时 不在触发
            if(this.data.count<=this.data.min){
                return
            }
            this.data.count--
            //更新数据的同时重新渲染页面
            this.setData({
                count:this.data.count
            })
            //自定义方法 当jian()执行时 自定义方法 synccount 执行 向页面传回count值
            this.triggerEvent("synccount",this.data.count)
        },
        //加方法
        jia(){
            //count 值大于max值时 不在触发
            if(this.data.count>this.data.max){
                return
            }
            this.data.count++
           //更新数据的同时重新渲染页面
            this.setData({
                count:this.data.count
            })
            this.triggerEvent("synccount",this.data.count)
        },
    }

使用自定义组件需要在全局或者局部的json中导入

//名称 自己起的名字     文件路径
 "countent":"../../components/count/countent"

在需要使用的页面中使用自定义组件

//组件名称跟刚刚所引入的名称相同
把刚刚写属性添加进去        自定义的方法
 <countent  label="数字：" bind:synccount="synccount"></countent>

使用自定义组件js页面

    //自定义方法  e 为默认传参
    synccount(e){
        //结构出 detail 中的参数 即为 自定义方法传回的参数
        let {detail}=e
      //更新数据的同时 重新渲染页面
        this.setData({
            count:detail
        })
    },

自定义插件效果图

QQ图片20211118195000.png