vue inject如何改写成ts装饰器的形式

主页面注入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()从而实现页面刷新但发现无效,写法是不是有问题

阅读 3.4k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Microsoft
子站问答
访问
宣传栏