vue 实现局部组件刷新

我不是女神ヾ 2023-01-03 04:57 215阅读 0赞

在 vue 项目里想实现组件的局部刷新，我用到过的方法整理了一下：

##### 1、 provide / inject 方法 #####

使用 v-if 方法来控制 router-view 的显示隐藏  
在 App.vue 页面

<template>
      <div id="app">
        <router-view v-if="isActive"/>
      </div>
    </template>
    <script>
    export default { 
    	name: 'App',
    	provide(){ 
    		return { 
    	      reload: this.reload;
    	    }
    	},
    	data(){ 
    		isActive:true
    	},
    	method:{ 
    		reload(){ 
    			this.isActive = false;
    			this.$nextTick(() => ){ 
    				this.isActive  = true;
    			}
    		}
    	}
    }
    </script>

然后再用到的页面引入，然后使用

export default { 
    	inject:['reload'],
    	method:{ 
    		refresh(){ 
    			this.reload();
    		}
    	}
    }
    </script>

##### 2、利用 v-if 直接操作组件 #####

<div v-if='isShow'> ...... <div>
    export default { 
    	data(){ 
    		isShow:true
    	},
    	method:{ 
    		refresh(){ 
    			this.isShow = false;
    			this.$nextTick(() => ){ 
    				this.isShow = true;
    			}
    		}
    	}
    }
    </script>

##### 3、利用 key 值的变化触发组件更新 #####

vue 的虚拟 DOM 算法在比对 Vnode时会用到 key 作为唯一标识，key 值变了该元素就会被重新渲染。

<div :key='keyNum'> ...... <div>
    export default { 
    	data(){ 
    		keyNum:0
    	},
    	method:{ 
    		refresh(){ 
    			this.keyNum++;
    		}
    	}
    }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue局部注册组件实现组件化登录注册

Vue局部注册组件实现组件化登录注册一、效果二、代码 1、index.js 2、App.vue 3、首页

痛定思痛。/ 2024年04月06日 15:28/ 0 赞/ 122 阅读

相关 Vue全局组件与局部组件

全局注册组件，组件在注册之后可以用在任何新创建的 Vue 根实例的模板中使用，局部注册的组件只能在指定父组件下使用，作用域小。 <template> <d

Myth丶恋晨/ 2023年08月17日 16:00/ 0 赞/ 139 阅读

相关 Vue3---组件注册(全局组件、局部组件)

全局组件通过 app.component() 方式注册 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_

Love The Way You Lie/ 2023年01月20日 08:11/ 0 赞/ 885 阅读

相关 vue 实现局部组件刷新

在 vue 项目里想实现组件的局部刷新，我用到过的方法整理了一下： 1、 provide / inject 方法使用 v-if 方法来控制 router-view 的

我不是女神ヾ/ 2023年01月03日 04:57/ 0 赞/ 216 阅读

相关 Vue实现页面的局部刷新（router-view页面刷新）

[https://blog.csdn.net/a5252145/article/details/102745598?utm\_medium=distribute.pc\_rel

港控/mmm°/ 2022年12月22日 11:23/ 0 赞/ 386 阅读

相关 vue 局部组件

vue 局部组件小案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

淩亂°似流年/ 2022年12月02日 15:04/ 0 赞/ 221 阅读

相关 vue04-局部组件

首先看代码： <!DOCTYPE html> <html lang=en> <head> <meta charset="ut

女爷i/ 2022年05月10日 00:03/ 0 赞/ 186 阅读

相关 vue创建局部组件

<div id="app"> <index> </index> </div> <scr

Dear 丶/ 2021年12月23日 03:19/ 0 赞/ 312 阅读

相关 jquery实现局部刷新Iframe

1，reload 方法，该方法强迫浏览器刷新当前页面。　　语法：location.reload(\[bForceGet\]) 　　参数： bForceGet，可选参数，

系统管理员/ 2021年09月27日 12:54/ 0 赞/ 639 阅读

相关 Vue实现页面的局部刷新

1. 首先需要修改App.vue ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

谁践踏了优雅/ 2021年07月25日 13:03/ 0 赞/ 527 阅读