没有看过微信小程序自定义组件(以下称Component)的同学可以到上了解一下。
以下是对Component的总结:
一、Component概念
Component像一样由wxml、wxss、js和json4个文件组成,且需要把这4个文件放在同一个目录中。与页面不一样的是,Component中的构造函数(也可以称构造器)是Component({}),而页面中的构造函数是Page({})。
二、slot
Component的slot(slot意思是插槽),主要是让你在外部的wxml可以自由的在你的Component的wxml里插入模块。大家可以在查看实例。
还有一个实例是是Component接受外部样式的,官网中有例子。
三、Component构造器
在Component构造器中需要注意的几个属性是:properties、data、methods。
其他的:如果是属性的话,感觉用到的不多,所以就不说了;如果是函数,则都是Component的生命周期函数,官网上即可了解得很清楚。
1.properties:对外属性,即如果外部的wxml文件传入数据时,会把数据设置成properties的属性。
如官网例子的index.wxml:
!--页面的WXML--my-componentmy-property="example"/这个"my-property"即对应custom-component.js里properties属性的myProperty,修改my-property就是修改myProperty。
custom-component.js如下:
Component({behaviors:[],properties:{myProperty:{//属性名type:String,//类型(必填),目前接受的类型包括:String,Number,Boolean,Object,Array,null(表示任意类型)value:'',//属性初始值(可选),如果未指定则会根据类型选择一个observer:function(newVal,oldVal){}//属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串,如:'_propertyChange'},myProperty2:String//简化的定义方式},data:{A:[{B:'initdata.A[0].B'}]},//私有数据,可用于模版渲染//生命周期函数,可以为函数,或一个在methods段中定义的方法名attached:function(){},moved:function(){},detached:function(){},methods:{onMyButtonTap:function(){this.setData({//更新属性和数据的方法与更新页面数据的方法类似myProperty:'Test'})},_myPrivateMethod:function(){//内部方法建议以下划线开头this.replaceDataOnPath(['A',0,'B'],'myPrivateData')//这里将data.A[0].B设为'myPrivateData'this.applyDataUpdates()},_propertyChange:function(newVal,oldVal){}}})但是!小程序有一个问题:是如果properties中的属性是带有数字的,如:myProperty2,这样wxml里对应的就是my-property2,但是这样程序会报错,希望小程序以后可能修复这个问题。
2.data:这里的data和页面中的data是一致的,但是这里的data只在组件内部使用。
Tips:properties和data里的属性不能一样,否则会有冲突。
3.methods:组件中的方法都是在这个对象里定义。
四、组件与外部通信事件
上面的"myProperty"是父节点设置数据到组件里,组件传数据到父节点是用事件的方式。
注册事件,index.wxml和index.js:
!--引用组件的页面模版--viewmy-componentid="test"bindmyevent="myEventListener"view这里是插入到组件slot中的内容/view/my-component!--或者可以写成--!--my-componentid="test"bindmyevent="myEventListener"view这里是插入到组件slot中的内容/view/my-component--/view监听事件:
Page({data:{},onLoad:function(){console.log(this.selectComponent("#test"));},myEventListener:function(e){console.log("Eventinindex")}})发射事件component-tag-name.wxml和component-tag-name.js:
!--组件模板--viewbuttonbindtap="onTap"点击这个按钮将触发“myevent”事件/button/view//components/component-tag-name.jsComponent({properties:{},methods:{onTap:function(){varmyEventDetail={}//detail对象,提供给事件监听函数varmyEventOption={}//触发事件的选项this.triggerEvent('myevent',myEventDetail,myEventOption)}}})源代码官网里有,也可以在下载。
五、组件通信的最后大招
如果以上通信还不能满足需求,可以用this.selectComponent("#test"),这个方法需要传一个id号。
注意上面的index.wxml中有一个代码是id="test",这样定义之后,就可以在js文件中用this.selectComponent("#test")获取到这个组件了。
最后,Component还有behaviors、组件关系、抽象节点等特性,但是对于一般的需求来说,不经常用到,所以就不作总结了。如果需要了解的话,可以去官网学习。
以上是本人的一点小总结,如有不足之处,还请各位指正!
最新资讯
-

小程序制作平台选型踩坑记录:2026年五大主流方案横向对比
2026 年微信小程序月活达 10.7 亿、覆盖 108 个行业,本次横向对比即速应用、乔拓云、凡科、有赞、微盟五大主流平台,分三阶段给出选型结论,核心聚焦成本、扩展性、运营能力三大维度。 -

即速应用,赋能企业玩转微信小程序智慧经营
作为国内领军的智慧商业经营服务商,即速应用始终秉承“让每个企业都拥有自己的智慧店铺”的愿景,持续赋能更多企业玩转智慧经营。即速应用旗下拥有“小程序搭建工具-即速应用”、“私域流量专家-即客云”等产品,帮助商家打通互联网全生态营销闭环。 -

即客云2.0重磅更新,让微信小程序运营更简单!
即客云作为一款基于企业微信的第三方工具,现从多维度提供超过30种功能,自上线以来,已服务多家企业,受到一致好评。近期,我们根据客户反馈和市场调研正式推出升级版 即客云2.0!更新了私域运营SOP,群日历功能,批量拓客,客户雷达,消息推送,个人欢迎语,帮助企业更好运用企业微信;同时提升了社群运营工作标准化,提升运营效率,帮助企业实现客户增长,玩转私域流量。










