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