1.

我们在上篇博文里面介绍了小程序的template模板，这里介绍一下component组件。我们创建template模板的时候，只创建了wxml和wxss文件，并没有json和js文件，而且数据交换以及事件都是在调用的时候操作。今天介绍的component组件则有自己的业务逻辑，可以看做一个独立的page页面，里面也有js和json文件。简单来说，如果只是展示，使用template就足够了，如果涉及到的业务逻辑交互比较多，那就最好使用component组件了。

2.

创建组件

3.

和template一样，也是在根目录创建一个存放组件的目录，里面创建二级目录，用于区分不同的组件，然后创建对应的页面文件，如下：

4.

组件文件内容

5.

我们还是以弹窗为例来介绍。popup.wxml文件：

viewclass"wx-popup"hidden"{{!isShow}}"viewclass'popup-container'viewclass"wx-popup-title"{{title}}/viewviewclass"wx-popup-con"{{content}}/viewviewclass"wx-popup-btn"textclass"btn-no"bindtap'_error'{{btn_no}}/texttextclass"btn-ok"bindtap'_success'class'confirm'{{btn_ok}}/text/view/view/view6.

可以看到里面不需要任何标签。

7.

wxss文件：

wxss文件内容和template的wxss文件内容一样，这里不在赘述8.

popup.json文件：

{"component":true,"usingComponents":{}}9.

这里是固定格式，把component设为true

10.

wxjs文件：

Component({options:{multipleSlots:true//在组件定义时的选项中启用多slot支持},/***组件的属性列表*/properties:{isShow:{type:Number,value:1},title:{//属性名type:String,//类型（必填），目前接受的类型包括：String,Number,Boolean,Object,Array,null（表示任意类型）value:'标题'//属性初始值（可选），如果未指定则会根据类型选择一个},//弹窗内容content:{type:String,value:'内容'},//弹窗取消按钮文字cancelText:{type:String,value:'取消'},//弹窗确认按钮文字confirmText:{type:String,value:'确定'}},/***组件的初始数据*/data:{flag:true,},/***组件的方法列表*/methods:{//隐藏弹框hidePopup:function(){this.setData({isShow:!this.data.isShow})},//展示弹框showPopup(){this.setData({flag:!this.data.flag})},/**内部私有方法建议以下划线开头*triggerEvent用于触发事件*/_cancelEvent(){//触发取消回调和外界交换的事件是cancelthis.triggerEvent("cancel");},_confirmEvent(){//触发成功回调和外界交换的事件是confirmthis.triggerEvent("confirm");}}})11.

组件创建完成。

12.

父模板使用组件

13.

index.json文件引入组件（不需要单独引入wxml和wxss文件）：

{"usingComponents":{"popup":"/component/popup/popup"}}14.

前面的popup是自己给组件起的名字，在wxml里面使用：

15.

index.wxml使用组件：

popupid'popup'title'标题'content'我是内容'cancelText'取消'confirmText'确定'bind:cancel"cancel"bind:confirm"confirm"/popup16.

上面id的内容就是json文件定义的组件名字。title、content等都是组件的属性值，这些值可以在父组件里面修改：

this.popup.setData({'title':'我是标题'});17.

bind后面是组件的事件。在调用组件的js文件里面使用此方法,如下：

cancel(){console.log('点击了取消');this.popup.setData({'title':'我是标题'});},confirm(){console.log('点击了确定');},showPopup(){this.popup.showPopup();},18.

组件的定义及使用就是这样的，非常简单。