页面中引用 组件 additional-entrust.vue,当 界面传的entrustGold值 改变时,组件状态不重新渲染
代码如下:
<div class = "test">
<additional-entrust
:entrustFlag="entrustFlag"
:eachIncrease="auctionData.eachIncrease"
:activityId="auctionData.activityId"
:entrustGold="entrustGold"
:entrustSilver="entrustSilver"
@entrustFlag="getEntrust"
:consumeBean = "consumeBean"
></additional-entrust>
</div>
组件:
additional-entrust.vue
解决方案:
在组件 additional-entrust 中通过watch 监听改变
export default {
name: 'additionalEntrust',
components: {
uniNumberBox
},
props: {
entrustFlag: {
type: Number,
default: 0
},
eachIncrease: {
//每次竞购所消耗点豆数
type: Number,
default: 1
},
/* 委托金豆余量 */
entrustGold: {
type: Number,
default: 0
},
entrustSilver: {
type: Number,
default: 0
},
consumeBean:{
type:Number,
default:0
},
/* 活动id */
activityId: {
type: String,
default: ''
}
},
data() {
return {
beanCount: 100,
consumption: 0, //消耗
goldRest: 0, //委托剩余金豆
silverRest: 0, //委托剩余银豆
};
},
methods: { },
watch: {
entrustGold() {
/*某一操作重置数据*/
this.$nextTick(() => {
this.goldRest = this.entrustGold;
});
},
entrustSilver() {
this.$nextTick(() => {
this.silverRest = this.entrustSilver;
});
},
consumeBean (){
this.$nextTick(() => {
this.consumption = this.consumeBean;
});
}
}
};