Vue 刷新当前组件
公用内容动态改变了全局参数,要求切换后刷新当前组件所有请求,或重新加载当前组件。因为我们在项目中加入了vue-routerapp.vue,就可以通过控制router-view去达到我们需求的效果。同时也要用到 provide/inject,个人列表类似vuex的辅助函数,跨越层级关系引入(注入)你的某个方法。app.Vue<template><div id="app" v-loa
·
公用内容动态改变了全局参数,要求切换后刷新当前组件所有请求,或重新加载当前组件。
因为我们在项目中加入了vue-routerapp.vue
,就可以通过控制router-view
去达到我们需求的效果。
同时也要用到 provide/inject,个人列表类似vuex的辅助函数,跨越层级关系引入(注入)你的某个方法。
app.Vue
<template>
<div id="app" v-loading.fullscreen.lock="fullscreenLoading" element-loading-spinner="rybloading" element-loading-text="正在请求数据" element-loading-background="rgba(0, 0, 0, 0.6)">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'app',
provide() {
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive: true
}
},
methods: {
reload() {
this.isRouterAlive = false
this.$nextTick(function() {
this.isRouterAlive = true
})
}
}
}
</script>
<style lang="scss">
</style>
然后在你修改全局参数的组件中加入
data(){
return{
}
},
inject:['reload'], // 在这个组件中注入这个方法
//...事件中调用
methods:{
changed(){
this.reload() //调用
}
}
我在项目中的具体表现
通过切换期次,修改全局的请求参数,结合了Vuex,在下拉菜单所在的组件中注入app.vue中的方法,从而实现了目标效果。
切换期次,重新加载当前组件所有数据。
更多推荐
已为社区贡献8条内容
所有评论(0)