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;
           });
       }
   }
};

vue中页面数据改变组件不重新渲染相关推荐

class根据状态 vue_搞懂并学会运用 Vue 中的无状态组件
啥是应用程序状态,为什么咱们需要它? 状态管理通常在较小的项目并不需要,但是当涉及到更大的范围时,如企业级的应用大部分需要它了.简单的说,状态是一个包含应用程序使用的最新值的对象.但是,如果咱们从结构 ...
.vue文件转换成html,在vue中把含有html标签转为html渲染页面的实例
在vue中把含有html标签转为html渲染页面的实例在标签内部添加v-html指令即可使用pug的写法: 这个content表示的是一个含标签的变量输入content为: 我是p标签输出结果 ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
Vue中的数据代理与数据劫持
数据代理数据代理字面上是通过一个对象代理对另一个对象属性的操作在vue中的数据代理,实际上是通过vm上的属性代理对_data中属性的操作数据劫持数据劫持也可称作数据代理,字面上是劫持到某个属性 ...
有关QJ_Filecenter在vue中的使用和组件封装
有关QJ_Filecenter在vue中的使用和组件封装 QJ_FileCenter在vue中的使用和组件封装安装第一步:在官网下载QJ_FileCenter安装包第二部:访问FileCente ...
Vue中如何扩展⼀个组件
Vue中如何扩展⼀个组件按照逻辑扩展和内容扩展来列举: 逻辑扩展有:mixins.extends.composition api: 内容扩展有: slots: 一.Mixin 组件和组件之间有时候会 ...
解决vue中对象属性改变视图不更新的问题
解决vue中对象属性改变视图不更新的问题参考文章: (1)解决vue中对象属性改变视图不更新的问题 (2)https://www.cnblogs.com/buxiugangzi/p/12050165 ...
[vue] vue中什么是递归组件？举个例子说明下？
[vue] vue中什么是递归组件?举个例子说明下? 组件自己调用自己,场景有用于生成树形结构菜单个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
在vue中把数据导出Excel文件
在vue中把数据导出Excel文件第一次尝试写文章在vue中把数据导出成Excel格式的文件,话不多,上代码: 第一步我们要先安装几个集成的插件 npm install -S file-saver ...

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

vue中页面数据改变组件不重新渲染相关推荐

最新文章

热门文章