import { ref, provide, nextTick } from "vue"; const isRouterView = ref(true); //父组件刷新方法 const reload = () => { isRouterView.value = false; nextTick(() => { isRouterView.value = true; }) } //provide进行注册 provide('reload', reload); 之后子子孙孙组件操作:...
这种方法通过在App.vue中定义一个reload方法,并在需要刷新页面的组件中注入该方法来实现页面刷新。这种方法不会导致页面短暂变空白,用户体验较好。 优点: 不会导致页面短暂变空白,用户体验较好。 可以精确控制哪些组件需要刷新,避免全局刷新带来的性能问题。 缺点: 实现稍微复杂,涉及provide/inject多层级组件通信。 vue ...
第一种: location.reload()this.$router.go(0) 这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好。 第二种:provide / inject 组合 方式是我试过最实用的,下面用项目截图给大家说明下: 首先,要修改下你的app.vue. 通过声明reload方法,...
注意:provide只能够向下进行传递数据;在使用provide和inject的时候需从vue中引入。 使用方法: 直接看代码即可: import {provide, ref, nextTick } from "vue"; const isRouterAlive = ref(true); const reload = () => { isRouterAlive.value = false; nextTick(() => { isRouterAlive.value = true ...
},setup() {// 局部组件刷新constisRouterAlive =ref(true);constreload= () => { isRouterAlive.value=false;nextTick(() =>{ isRouterAlive.value=true; }); };provide("reload", reload);return{ isRouterAlive, }; },watch: { },
Vue3刷新页面的方法,我们在删除完列表项后,通常需要刷新列表页,我们可以使用JS原生的方法刷新页面。location.reload();但是这会让整个屏幕重新加载,体验很不好。更好的方式如下:Vue3解决方法:App.vue:<scriptsetup>import{nextTick,provide,ref}from"vue";cons
import { defineComponent, nextTick, provide, reactive, ref } from 'vue' export default defineComponent({ setup() { const state = reactive({ showRouter: true, }) function reload() { state.showRouter = false nextTick(() => { state.showRouter = true ...
因为涉及到跨组件通信,所以需要使用provide/inject。在router-view组件中通过provide提供一个relaod方法,当删除或者编辑完成表格数据以后,使用inject触发reload方法。在reload方法里面我们来控制判断条件。当realod的时候isRouterAlive=false,紧接着在nextTick中设置为true,这样就可以实现组件重新加载了。
provide('reload', reload)return { state,} },})刷新页⾯ 需要⽤到刷新事件的⼦组件：ArticleTable.vue import { inject } from 'vue'//注⼊刷新事件,这⾥括号中的参数要对应上前⾯provide中的第⼀个参数 const reload: any = inject('reload')const confirm = async (data: any) => { aw...
}provide('reload', reload)return{ state, } }, }) 刷新页面 需要用到刷新事件的子组件: ArticleTable.vue子组件 import{ inject }from'vue'//注入刷新事件,这里括号中的参数要对应上前面provide中的第一个参数constreload: any =inject('reload')constconfirm=async(data: any) => {awaitarticle.DeleteAsyn...