主页面注入provide
<template>
<div id="app">
<div class="left-menu-wrap">
<CustomMenu />
</div>
<div class="content-wrap">
<!-- <router-view /> -->
<router-view v-if="isRouterAlive" />
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from 'vue-property-decorator';
import CustomMenu from '@/components/CustomMenu.vue';
@Component({
name: 'App',
components: {
CustomMenu,
},
})
export default class extends Vue {
private isRouterAlive = true;
@Provide()
reload = () => {
this.isRouterAlive = false;
this.$nextTick(() => {
this.isRouterAlive = true;
});
}
}
</script>
子页面引入inject
<script lang="ts">
import {
Component, Vue, Prop, Emit, Inject,
} from 'vue-property-decorator';
export default class AddUsers extends Vue {
@Inject('reload') private reload
// 保存数据
private ok() {
const url = '/dict/manager/save/mult';
const dictList = this.tableData;
const obj = {
dictList: [],
};
obj.dictList = this.tableData;
this.loading = true;
this.$Http.post(url, obj)
.then((e: any) => {
if (e.success) {
this.loading = false;
console.log(this.reload(), 'hanhsu');
this.reload();
} else {
this.loading = false;
this.$Message.error(e.message);
}
});
}
}
</script>
子页面点击保存想触发主页面的reload()从而实现页面刷新但发现无效,写法是不是有问题