微信小程序像Vue和React一样赋于了组件的开发能力，支持组件的调用和传值，同时由于小程序上传时限制在2MB以内，对于稍微大一点的小程序组件的使用就特别重要了，下面给大家介绍下小程序的组件用法。

1. 封装子组件

在项目根目录下定义components文件夹，新建一个header和footer的文件夹，像小程序的页面一样分别定义js、wxss、wxml、json文件。

header子组件的wxml

view class="box"    view class='header'        {{msg}}    /view    button bindtap='run' size='mini'接收父组件给的数据/button/view

header子组件的js

Component({    // 组件的属性列表    properties: {        // 接受父组件的给的数据        title: {            type: "String",            value: ""        }    },    // 组件的初始数据    data: {        msg: '头部组件'    },    // 组件的方法列表    methods: {        run() {            this.setData({                // 通过this.data获取父组件里传过来的值                msg: this.data.title            });        },        childRun() {            console.log('我是子组件的方法')        }    }})

footer子组件的wxml

view    button bindtap='getParent'子组件触发父组件的方法/button/view

footer子组件的js

Component({    // 组件的属性列表    properties: {    },    // 组件的初始数据    data: {    },    // 组件的方法列表    methods: {        getParent() {            this.triggerEvent('event', '子组件的数据')        }    }})

子组件的wxss与json文件的写法没有什么特别的地方，与正常的小程序页面一样，此处省略。

2. 在父组件里调用子组件

首先在父组件里的json文件中引入子组件。

{    "navigationBarTitleText": "用户",    "usingComponents": {        "header": "../../components/header/header",        "footer": "../../components/footer/footer"    }}

父组件wxml

view    header id="header" title="{{title}}"/header    button bindtap='getChildFn'父组件里获取子组件的方法/button    footer bindevent="run"/footer/view

父组件的js

Page({    // 页面的初始数据    data: {        title: '父组件给子组件的数据'    },    // 监听页面加载    onLoad: function(options) {                       },    getChildFn() {        var header = this.selectComponent("#header")        // 父组件里面执行子组件的方法        header.childRun();         // 父组件里面直接获取子组件的数据        // console.log(header.data.msg);     },    run(e) {        console.log('我是父组件的方法')    }})

3. 父组件传值给子组件

在以上的父组件中调用子组件时动态绑定title属性，在子组件header中定义了title接受值的类型，然后通过 this.data.title 就可以获取父组件传过来的title值了。

4. 父组件里调用子组件里的方法

在父组件中调用子组件时，给子组件定义一个id，如上面的id="header"，在父组件中触发getChildFn方法，在getChildFn方法中通过 this.selectComponent("#header") 获取子组件对象存为header，然后就可以通过header调用子组件里的方法和数据了，如上例中的header.childRun() 即调用子组件的方法，header.data.msg 即调用子组件的数据。

5. 子组件里调用父组件的方法

在子组件footer里触发自定义的getParent方法，在getParent里通过 this.triggerEvent 传入在父组件中接收数据的事件名("event")和要接收的数据('子组件的数据')，然后在父组件绑定事件event，如上例中的 bindevent="run"  ，然后在父组件里的run方法里就可以接受子组件传过来的数据了。