vue组件值变化但不刷新强制组件刷新的问题

目录
  • 组件值变化但不刷新强制组件刷新
    • bug复现
    • 解决
  • 强制刷新vue组件
    • 问题
    • 解决 – 强制刷新组件

组件值变化但不刷新强制组件刷新

在调用组件的时候，如果数据中只是某个属性变化（比如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" top="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()
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue关于this.$refs.tabs.refreshs()刷新组件方式

    vue关于this.$refs.tabs.refreshs()刷新组件方式

    目录 this.$refs.tabs.refreshs()刷新组件 第一种:当前组件刷新 第二种:刷新父组件时 第三种:非关系组件 vue组件重新加载(刷新) 如何刷新当前组件 this.$refs.tabs.refreshs()刷新组件 当更改了用户信息后,需要刷新页面或者组件. 第一种:当前组件刷新 定义一个请求用户信息的方法,在需要时调用: sessionStorage.setItem('userInfo',JSON.stringify(this.userInfo)); //从sessio

  • vue打开子组件弹窗都刷新功能的实现

    vue如何一打开子组件弹窗都刷新? 在父页面中给子组件同时绑定:visible.sync和v-if :visible.sync="paramAddDialog" v-if="paramAddDialog" 整体代码: <el-dialog title="绑定其他更多的账户" width="1200px" align="center" :visible.sync="paramAddDialog

  • vue相同路由跳转强制刷新该路由组件操作

    想必大家在平时开发的时候可能遇到这种需求,在打开该菜单页面的情况下,再次点击菜单需要刷新该组件(销毁再创建).而vue自身如果路由不变的情况下是不会这样做的,那么只能使用一些骚操作了. 1.在菜单的路由跳转上绑定一个随机query参数,例如时间戳或者随机数: this.$router.push({ path:"/xxx", query:{ t:Date.now(), }, }); 该操作会触发路由改变,但是组件内的状态没有初始化,因为组件没有被重建. 2.在路由容器上绑定key值: &

  • vue下拉刷新组件的开发及slot的使用详解

    "下拉刷新"和"上滑加载更多"功能在前端.尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的"blink"功能和各位探讨下[下拉刷新]组件的开发: 正式开篇 在前端项目的 components 文件夹下新建 pullRefreshView 文件夹,在其中新建组件 index.vue:(它代表"整个屏幕",通过slot插入页面其他内容而不是传统的设置遮罩层触发下拉刷新) 首先需要编写下拉刷新组件的 template,

  • 基于vue封装下拉刷新上拉加载组件

    基于vue和原生javascript封装的下拉刷新上拉加载组件,供大家参考,具体内容如下 upTilte插槽是下拉刷新的自定义内容放的地方 downTilte插槽是上拉加载的自定义内容放的地方 默认插槽为列表内容区域 组件代码如下 <template> <div class="refresh" id="refresh"> <slot name="upTilte"></slot> <slot&g

  • Vue实现父子组件页面刷新的几种常用方法

    Vue实现父子组件页面刷新的几种常用方法

    目录 1.原地页面重新加载(不推荐) 2.空白页面作为过渡 3.使用Provide / Inject组合控制显示 4.v-on:param父组件监听子组件事件 参考文档: 很多时候我们在操作过页面时候,特别是增删改操作之后,数据会有所改变,这个时候我们希望返回的界面中的数据要和数据库中的数据进行同步,就需要刷新当前页面,如果是使用ajax可以使用异步请求实现页面的局部刷新,Vue常用的几种刷新页面方法如下: 1.原地页面重新加载(不推荐) this.$router.go(0) //根据路由重新定

  • vue组件值变化但不刷新强制组件刷新的问题

    目录 组件值变化但不刷新强制组件刷新 bug复现 解决 强制刷新vue组件 问题 解决 – 强制刷新组件 组件值变化但不刷新强制组件刷新 在调用组件的时候,如果数据中只是某个属性变化(比如id)变化,在vue开发工具中看到变量值变化,但是组件上的数据就是不刷新 bug复现 引用组件 <bulletMenuVue v-else-if="sNode.type == 'cBomb'" :data="sNode" /> sNode数据结构 {     "

  • Vue子组件监听父组件值的变化

    目录 子组件监听父组件值变化 子组件监听父组件的值同步更新数据 子组件监听父组件值变化 子组件中利用watch监听父组件值的变化 // 子组件 props: ["a"],     watch: {         a(oldValue, newValue) {             // oldValue  a旧值             // newValue a新值         }     } 子组件监听父组件的值同步更新数据 子组件 props : ["data&

  • 详解VUE里子组件如何获取父组件动态变化的值

    在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件. 比如想实现一个switch开关按钮的公用组件: 1.父组件可以向按钮组件传递默认值. 2.子组件的操作可以改变父组件的数据. 3.父组件修改传递给子组件的值,子组件能动态监听到改变. 比如父组件点击重置,开关组件的状态恢复为关闭状态: 方法1: 1.因为存在子组件

  • vue组件props属性监听不到值变化问题

    目录 props属性监听不到值变化问题 props监听变化的几种方式 应用场景 1.computed 计算属性 2.methods 方法 3.watch 侦听器 props属性监听不到值变化问题 在写项目时遇到一个问题,父组件传到子组件的prop,在子组件监听不到变化, 遂查看vue文档,得知watch有一种深度监听的方法. 阅读vue文档如下代码.=> var vm = new Vue({   data: {     a: 1,     b: 2,     c: 3,     d: 4,  

  • Vue强制组件重新渲染的方法讨论

    有时候,依赖 Vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当前的DOM,重新开始.那么,如何让Vue以正确的方式重新呈现组件呢? 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key. 当我们需要重新渲染组件时,只需更 key 的值,Vue 就会重新渲染组件. 这是一个非常简单的解决方案. 当然,你可能会对其他方式会更感兴趣: 简单粗暴的方式:重新加载整个页面 不妥的方式:使用 v-if 较好的方法:使用Vue的内置forceUpda

  • Vue中强制组件重新渲染的正确方法

    有时候,依赖 vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当前的DOM,重新开始.那么,如何让vue以正确的方式重新呈现组件呢? 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key. 当我们需要重新渲染组件时,只需更 key 的值,Vue 就会重新渲染组件. 这是一个非常简单的解决方案. 当然,你可能会对其他方式会更感兴趣: 简单粗暴的方式:重新加载整个页面 不妥的方式:使用 v-if 较好的方法:使用Vue的内置forceUpda

  • vue 强制组件重新渲染(重置)的两种方案

    数据通过异步操作后,对之前刚加载的数据进行变更后,发现数据不能生效 方案一 当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染.使用 v-if 可以解决这个问题 <template> <third-comp v-if="reFresh"/> </template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch

  • vue的props实现子组件随父组件一起变化

    本文实例为大家分享了vue的props实现父组件变化子组件一起变化,供大家参考,具体内容如下 类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 绑定动态 Props 到父组件的数据.每当父组件的数据变化时,也会传导给子组件: <div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></c

  • 在vue中对数组值变化的监听与重新响应渲染操作

    在我们项目开发过程中,实例中的数据类型可以是对象.数组等.在对象中,某个属性值发生更改时,我们可以通过对象的深度监听,以达到重新渲染页面的需求.或者查阅这篇文章 例如: <script> export default { data(){ return { objVal: { name: 'obj', type: 'obj' } } }, watch:{ objVal:{ handler(val,oldval){ }, deep: true, } }, methods:{ changeObj()

  • vue实现监听localstorage值变化

    vue实现监听localstorage值变化

    目录 vue监听localstorage值变化 监听localStorage中值的变化实现跨页面通信 部分属性介绍如下 其余属性截图如下 vue监听localstorage值变化 在vue中实现监听localstorage中某个键对应的值的变化 在根目录下创建一个名为utils的文件夹,在文件夹中创建一个tool.js文件 //****将这段内容放在tool.js文件中**** // 重写setItem事件,当使用setItem的时候,触发,window.dispatchEvent派发事件 fu

随机推荐