微信小程序像Vue和React同样赋于了组件的开发能力,支持组件的调用和传值,同时因为小程序上传时限制在2MB之内,对于稍微大一点的小程序组件的使用就特别重要了,下面给你们介绍下小程序的组件用法。json
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子组件的jsxss
Component({ // 组件的属性列表 properties: { // 接受父组件的给的数据 title: { type: "String", value: "" } }, // 组件的初始数据 data: { msg: '头部组件' }, // 组件的方法列表 methods: { run() { this.setData({ // 经过this.data获取父组件里传过来的值 msg: this.data.title }); }, childRun() { console.log('我是子组件的方法') } } })
footer子组件的wxmlthis
<view> <button bindtap='getParent'>子组件触发父组件的方法</button> </view>
footer子组件的jsspa
Component({ // 组件的属性列表 properties: { }, // 组件的初始数据 data: { }, // 组件的方法列表 methods: { getParent() { this.triggerEvent('event', '子组件的数据') } } })
子组件的wxss与json文件的写法没有什么特别的地方,与正常的小程序页面同样,此处省略。code
2. 在父组件里调用子组件component
首先在父组件里的json文件中引入子组件。xml
{ "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方法里就能够接受子组件传过来的数据了。