如何在vuejs中重新安装子组件

问题描述

im搜索如何重新安装子组件。不仅可以重新渲染它，还可以完全重新安装（因此将调用我子组件的 mounted()函数。

我知道已经有一个类似的问题（How to re-mount a component in VueJS?），但是当我按照这些说明进行操作时，作者正在寻找如何重新套现（解决方案与这种情况匹配的方法），我的 mounted()函数未调用。

这是我所拥有的：

我有一个包含2个组件的页面：

• 上传组件
• 列表组件

这就是我想要的：

我使用上传组件将.zip文件上传到我的api。然后，API解析.zip，并将其信息存储在数据库中。 我的列表列出了每个.zip的表格，显示基本信息（名称，说明...），从商店中获取数据，如果为空，则使用axios从API中提取（所有内容都插入mounted()钩子中）。 上传新的.zip时，我唯一需要更新列表的解决方案是从我的API中获取列表。

问题出在这里：我找不到更新列表的方法。知道在安装列表组件时已获取数据，解决方案是重新安装组件，但是我找不到方法，所以我要问你们。

这是我的页面代码：

<template>
  <div>
      <div class="col-md-4 text-center mr-auto">
        <card>
          <Upload @upload="upload" ></Upload>
        </card>
      </div>
    <div>
      <List :ProjID="selectedProject.id" :key="childKey"/>
    </div>
  </div>
</template>

<script>
import upload from "./upload.vue";
import API from "./services/API";
import list from "./list.vue";

export default {
  name: "ProjectCard",components: {
    Upload,List,},props: {
    selectedProject: null
  },data() {
    return {
      childKey: 0,};
  },methods: {
    upload(file) {
      API.postJob(file,this.selectedProject.id)// <-- function calling axios,everything is working here. It also delete stored file in my store,so the list component will fetch from API to get new data
        .then(response => {
          this.childKey += 1;
          console.log("success!")
        })
        .catch(response => {
            console.log("not succes :c")
        });
    }
  }
};
</script>

这是我的列表mount（）钩子：

  async mounted() {
    const fetch = await API.getAll(); <-- this function fetch from my store,and if nothing comes out,fetch from API.
    if (fetch == 401) {
      console.log("not logged in");
    }
    if (fetch == 500) {
      console.log("error");
      return();
    }
    this.fetchedFiles = fetch;
    this.dataReady = true;
  }

我必须重新调用mount（）挂钩才能更新我的列表（或任何更好的解决方案）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）