问题:父组件中的数据上传不上去
原因:页面初始化时数据并没有加载出来,需要初始化后用户手动填写数据,故这里的方法应写在点击保存后的触发函数中
注意点:可以通过在父组件、子组件onload以及他们当中的方法函数中填写console.log()
来探查问题出在哪一模块
$ActionPanel$createRecord: function $ActionPanel$createRecord() {
console.log('start大'); // p-title
console.log('子组件价格' + this.skuList[0].price); // p-title.
console.log('子组件库存' + this.skuList[0].stock); // p-title.
console.log('子组件型号' + this.skuList[0].sku); // p-title.
console.log('子组件图片' + this.pictures[0].url); // p-title.
var database = wx.cloud.database();
var commodity = database.collection('commodity');
commodity.add({
data: {
tags: ["111", "222"],
goods_price:this.skuList[0].price,
goods_stock:this.skuList[0].stock,
goods_sku:this.skuList[0].sku,
goods_url:this.pictures[0].url,
}
}).then(function (res) {
_wepy2.default.showToast({
title: '\u65B0\u589E\u6570\u636EID\u4E3A ' + res._id,
icon: 'none'
});
});
},
子组件action_panel.js的代码
_createClass(ActionPanel, [{
key: 'onLoad',
value: function onLoad(e) {
console.log('参数1' + e); // p-title
console.log('执行子组件ACTION_PANEL的onload'); // p-title
console.log('子组件价格' + this.$parent.skuList[0].price); // p-title.
console.log('子组件库存' + this.$parent.skuList[0].stock); // p-title.
console.log('子组件型号' + this.$parent.skuList[0].sku); // p-title.
this.$apply();
this.$parent.parentTitle = 'p-title-changed';
this.$parent.$apply();
console.log(this.syncGood);
}
}]);
输出的结果
这里由于对data部分数据初始化,故可以打印出这三个值,但其他值不可打印
回到父组件edit.js中
父组件中调用子组件的值
$ActionPanel$submitText
wepy中子组件写creatRecord方法,父组件需要用$ActionPanel$createRecord来接收
ActionPanel是微信小程序自动添加的子组件类名
<view class="main-container">
<view class="zan-panel">
<view class="zan-btns">
<button class="zan-btn zan-btn--fill" @tap="createRecord">{{submitText}}</button>
<button class="zan-btn" @tap="remove" wx:if="{{mode == 'edit'}}">删除</button>
</view>
</view>
</view>