微信小程序像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方法里就可以接受子组件传过来的数据了。