首页 > 其他分享 >vue中页面数据改变组件不重新渲染

vue中页面数据改变组件不重新渲染

时间:2024-11-09 10:42:37浏览次数:4  
标签:vue default entrustGold consumeBean Number entrustSilver 组件 type 页面

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

标签:vue,default,entrustGold,consumeBean,Number,entrustSilver,组件,type,页面
From: https://www.cnblogs.com/sathcal/p/18536426

相关文章

  • 微信小程序获取某个元素或组件距离顶部的初始高度
    给元素加一个id然后使用wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){rect.id//节点的IDrect.dataset//节点的datasetrect.left//节点的左边界坐标rect.right//节点的右边界坐标rect.top//节点的上边界坐标rect.bottom//节点的下......
  • 微信小程序获取时长页面
    //index/PageA.jsconstapp=getApp()vartimerPageA;//计时器varintPageATime=0Page({/***页面的初始数据*/data:{},//A页计时器countTime(){letthat=this//读取A页计时数值wx.getStorage({......
  • 焕然一新!TinyVue 组件库 UI 大升级,更符合现代的审美!
    你好,我是Kagol,个人公众号:前端开源星球。自从TinyVue组件库去年开源以来,一直有小伙伴反馈我们的UI不够美观,风格陈旧,不太满足现阶段审美。“TinyVue给我的感觉就是一个没啥审美能力、但是很努力的老程序员开发的”看到这个评价,我是哭笑不得,一方面对小伙伴们真诚、友好的......
  • vue3组件应用 + 以及组件相关知识应用
    文章目录vue组件化开发一、什么是Vue组件化开发二、组件的创建方式三、组件的数据传递四、组件的生命周期五、组件的插槽(Slot)数据传递的方式实例组件生命周期应用场景插槽应用define相关应用vue组件化开发一、什么是Vue组件化开发概念Vue组件化开发是一种将用......
  • react 组件应用
    文章目录react组件react中组件hook函数应用useMemo技术细节(useMemo钩子函数和useCallback钩子函数)小结(依赖性数组应用)react组件函数式组件实例及应用场景实例:以下是一个简单的函数式组件,用于显示一个欢迎消息。importReactfrom'react';con......
  • 【JAVA毕业设计】基于Vue和SpringBoot的技术交流分享平台
    博主说明:本文项目编号T053,文末自助获取源码\color{red}{T053,文末自助获......
  • 【JAVA毕业设计】基于Vue和SpringBoot的服装销售平台
    博主说明:本文项目编号T054,文末自助获取源码\color{red}{T054,文末自助获......
  • 【开题报告】基于Springboot+vue牧场信息化系统(程序+源码+论文) 计算机毕业设计
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着科技的飞速发展和信息化时代的到来,传统牧场管理模式正面临前所未有的挑战与机遇。传统牧场往往依赖人工记录与监控,这种方式不仅效率低下,而且容易......
  • 【开题报告】基于Springboot+vue停车场管理系统(程序+源码+论文) 计算机毕业设计
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着城市化进程的加速,车辆数量急剧增加,停车难已成为各大城市普遍面临的问题。传统的停车场管理方式存在诸多不足,如车位利用率低、停车体验差、管理效......
  • MudBlazor:基于Material Design风格开源且强大的Blazor组件库
    项目介绍MudBlazor是一个基于MaterialDesign风格开源、免费(MITLicense)、功能强大的Blazor组件框架,注重易用性和清晰的结构。它非常适合想要快速构建Web应用程序的.NET开发人员,无需费力地处理CSS和JavaScript。由于MudBlazor完全使用C#编写,因此你可以自由地调整、修复或扩......