今天分享文章“vue组件值变化但不刷新问题怎么解决”,主要从:组件值变化但不刷新强制组件刷新、bug复现、解决等几个方面为大家介绍,希望能帮到您。
组件值变化但不刷新强制组件刷新
在调用组件的时候,如果数据中只是某个属性变化(比如id)变化,在vue开发工具中看到变量值变化,但是组件上的数据就是不刷新
bug复现
引用组件
<bulletMenuVue v-else-if="sNode.type == 'cBomb'" :data="sNode" />
sNode数据结构
{ "id": "gun2m2c4", "label": "子弹4", "type": "cBomb", "data": { "angle": 50, "mwr": { "checked": false, "band": 50, "dbi": 50 }, "slr": { "checked": false, "length": 50, "power": 50, "facula": 50, "size": 50 }, "irDetector": { "checked": false, "band": 50, "dbi": 50 }, "mwd": { "checked": false, "band": 50, "direction": 50, "angle": 50 } }}
当鼠标点击切换子弹过快时,会出现子组件不刷新的情况
解决
先看值有没有return出去!如果没有return,子组件也是不响应的,watchEffect甚至监听不到
我们将提供一个key属性,以便 Vue 知道特定的组件与特定的数据片段相关联。如果key保持不变,则不会更改组件,但是如果key发生更改,Vue 就会知道应该删除旧组件并创建新组件。
我们可以将key分配给子组件,想重新渲染组件时,更新该key即可。这应该是强制Vue重新渲染组件的优异方法
具体一点
把子弹的id当做key给组件,当作为key的id发生变化时,Vue将知道它必须销毁组件并创建一个新组件。我们得到的是一个子组件,它将重新初始化自身并“重置”其状态。
<bulletMenuVue v-else-if="sNode.type == 'cBomb'" :data="sNode" :key="sNode.id" />
强制刷新vue组件
例如我有一个表格,每次点击其中的一行弹出一个窗口,展示对应的信息,弹窗如下
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" 较好="0"> <UserPage v-if="isShow" :userid="userid"/></el-dialog>
可见弹窗里面加载的其实是一个组件,组件通过判断当前点击行的id来进行不同数据的渲染
问题
发现,其实每次弹窗出来的数据都是名列前茅次加载的数据,原因是根本没有重新加载,而只是将dialog里面的组件进行展示和隐藏而已
解决 – 强制刷新组件
给点击时间里面加上强制刷新组件的代码,如下
//methods中方法handleCreate(row) { this.isShow = false//销毁组件 this.$nextTick(() => { this.isShow = true//重建组件 }) //控制dialog的显示 this.dialogStatus = 'create' this.dialogFormVisible = true //传参 this.userid = row.approvalId.toString()}
本文有关“vue组件值变化但不刷新问题怎么解决”的介绍就到这里,如果您已经掌握上述知识,那就赶紧行动实操一下!如果还需要了解更多“vue组件值变化但不刷新问题怎么解决”相关内容,可点击进入Worktile网站相关频道,进行搜索与查询。
文章标题:vue组件值变化但不刷新问题怎么解决,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/15132