微信小程序components的使用

1.在顶级目录下建立一个components文件夹,在这个文件夹下再建立一个文件夹,例如叫作add。

2.右击add点击新建component,会生成4个文件

3.在组件中编写wxml页面、wxss和page一样,hidden="{{!isshow}}"是让组件先隐藏起来,需要时再显示。


4.编写js文件

            ①properties属性:可以设置默认值,也可以由参数传递,如下图设置默认值


                 ②data,组件的初始数据,如下图设置,先让组件隐藏起来


                 ③method,组件中的方法,不带下划线为共有方法,带下划线为私有方法,由外部定义触发事件,待会会讲到如何触发


5.在页面引入component

             ①在页面json文件中进行如下配置,定义引入的组件名为‘tc’


              ②在wxml页面引入组件'tc',并且可以传参,不传则使用properties定义的默认值,并使用了事件监听bind自定义函数


             ③在js文件中的onReady方法中实例化组件,this.tc是一个组件对象


             ④使用组件中的公有和私有方法

                           使用公有方法显示弹窗:


                          自定义私有方法


 最后效果


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容