vue中不刷新页面实现所有组件重新加载 重新执行生命周期
在有些情况下需要重新加载页面或者触发组件的生命周期,这个时候刷新页面很简单就能实现,但是这样用户体验不好.这个时候我们可以通过provide/inject可以轻松实现跨级访问祖先组件的数据,使用v-if让App.vue重新加载。
1、在根组件app.vue中给router-view加上v-if,然后定义触发v-if的方法,用provide 传递给下级组件。
<template> <div id="app" ref="app"> <router-view v-if="isRouterShow"/> </div> </template> <script> export default { name: 'App', provide () { return { reload: this.reload //把方法传递给下级组件 } }, data() { return { isRouterShow: true //定义一个变量控制v-if } }, methods: { async reload () { //触发显示隐藏 this.isRouterShow = false await this.$nextTick() this.isRouterShow = true }, } </script>
2、在需要用到刷新组件的页面用inject接收,再调用。
export default { inject: ['reload'], //接收App.vue传递的方法 methods: { reloadHandle () { this.reload() //直接调用 } } }
另外provide/inject还可以传递对象数据,方便跟组件传值