做一个外贸网站,安装wordpress主题,精品课程网站设计代码,在谷歌上怎么做网页最近做项目#xff0c;遇到个大坑#xff0c;这会爬出来了#xff0c;写个总结#xff0c;避免下次掉坑。
vue父子组件传值不能实时更新问题#xff0c;父组件将值传给了子组件#xff0c;但子组件显示的值还是原来的初始值#xff0c;并没有实时更新#xff0c;为什么…最近做项目遇到个大坑这会爬出来了写个总结避免下次掉坑。
vue父子组件传值不能实时更新问题父组件将值传给了子组件但子组件显示的值还是原来的初始值并没有实时更新为什么会出现这种问题呢
出现这个问题可能有以下两个原因
一、 父组件没有把值传过去子组件没有获取到最新的值。
二、子组件接收到最新的值了但是没有实时渲染到视图上。
如果是第一种情况很简单核对传的参数确保把最新的值传过去就可以了。
若是第二种情况稍微有些麻烦但也可以解决主要有两种解决方案
① 利用v-if的重新渲染机制获取到值之后将子组件重新渲染一遍。
② 利用watch监听数据若是数据变化调用视图渲染方法。
下面结合项目的实际情况具体分析这两种方法。
在项目中将erchart中的生成仪表盘的数据封装了一个子组件父组件中传给仪表盘一个初始值后续调用后台接口返回最新的数据传给这个仪表盘组件的之后发现仪表盘中的数据并没有实时的更新。仪表盘如下图 首先利用第①种方法利用v-if渲染机制
设置一个参数reRender。设置v-if“reRender”并将reRender初始值设置为false从后台获取数据之后将reRendertrue。
这样就能够将最新的数据渲染到子组件的视图中了。但这样如果我在同一个页面中调用了很多次这个子组件生成多个仪表盘就需要设置很多个类似于reRender的属性。
那么有的小可爱就提出来了我设置一个reRender属性然后几个子组件共用这个属性不就可以了吗几个后台接口调完更新数据之后在统一将reRendertrue。
这种方法我尝试过了不可以我不知道原因。
只有将reRendertrue放在那个调接口的方法里获取到后台数据之后才可以。尝试了网上提出的强制更新的方法也不行。
所以遇到这种一个页面调用多个这种组件的情况使用v-if就很繁琐。
若是别人封装了这么一个组件数据更新的时候还要利用v-if重新渲染一下那就感觉这个组件可能封装的不是太好所以咱们还是完善子组件。
这里就涉及到了第二种方法设置watch监听监听数据当子组件监听到数据发生改变时调用方法。
监听传的数据这里面用到了两个属性immediate和deep在watch中不会监听初始值只有当值改变时才会执行handler函数。但是我们想要在最初赋值的时候也执行handler函数就需要用到immediate:true。而普通监听只能监听字符串、数字等值要想监听到对象中某个属性的变化就需要用到深度监听deep:true。 在这之后我发现控制台报错了 ”TypeError: Cannot read property ‘getAttribute’ of undefined”如下所示 后面查了一些资料是因为在vue中数据和dom渲染是异步的当dom还没渲染却用数据去赋值的话就会出现这个问题。解决方法是利用this.$nextTick()。this.$nextTick()将数据渲染方法放到dom渲染之后这样就不会出现这个问题了。 依此子组件数据就可以实时更新了。如下图
