vue中頁面數據改變組件不重新渲染

頁面中引用 組件 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;
            });
        }
    }
};