小程序开发中,封装共用组件特别常用,现在记录一下组件的使用以前父子组件是如何通信的。
父组件.json
{
"usingComponents": {
"Cart": "../../components/Cart/Cart"(组件路径)
}
}
父组件.wxml
<Cart num="{{num}}" bindnumChange="numChange"></Cart >
父组件.js
Page({
data: {},
numChange(e) {
console.log(e.detail); //子组件传给父组件的数据
}
})
子组件.json
{
"component": true
}
子组件.wxml
<view>
<button type="default" bindtap="numChange">这是父组件的值:{{num}}</button>
</view>
子组件.js
Component({
properties: {
num: { //属性名
type: Number, //类型
value: "", //默认值
observer: function(newVal, oldVal) {
//这里与后面的_propertyChange一样监听属性值改变
}
}
},
methods: {
//监听属性改变
_propertyChange(newVal, oldVal) {
//新改变的值
console.log(newVal);
//旧值
console.log(oldVal);
},
numChange(e) {
this.setData({
num: 88
})
//使用triggerEvent传参调起父组件的numChange事件
this.triggerEvent("numChange", this.data.num);
}
}
})