以编程方式从其他组件中销毁组件答案

【问题标题】：Programmatically destroy a component from other component以编程方式从其他组件中销毁组件
【发布时间】：2017-09-02 18:30:42
【问题描述】：

在我的 vue 应用程序中，router-view 中的一些特定组件使用 vue 提供的 <keep-alive></keep-alive> 进行缓存。

当用户登录时 posts.vue 组件就像我上面所说的那样被缓存

一切正常。

现在我想在用户注销时销毁这个 posts.vue 组件。这样posts.vue 组件在用户再次登录时重新渲染 p>

注销按钮完全存在于其他组件menu.vue 中，并且用于注销的点击逻辑存在于此nenu.vue 组件中

那么我如何使用menu.vue 组件上的vm.$destroy() 方法在posts.vue 组件上实现这一点

所以我的主要问题是如何控制一个组件与另一个组件的生命周期

docs 警告使用如下:,

在正常使用情况下，您不必自己调用此方法。

更喜欢使用 v-if 和 v-for 以数据驱动的方式控制子组件的生命周期。

但就我而言，我不能使用 v-if 或 v-show

或者有没有更好的方法可以使用

【问题讨论】：

当用户再次登录并尝试访问 posts.vue 时，现在发生了什么？
@Deepak 以前缓存的帖子也正在显示....所以我希望这个组件在用户再次登录时强制重新渲染
如果您可以在 posts.vue 中发布完成的内容可能会有所帮助。获取数据的函数应该在 created 钩子中调用。这应该会照顾好它。
@Deepak 无法理解...请您详细说明一下...谢谢
请提供一些小提琴，或者posts.vue中的代码。

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

当您从子组件登录或注销时，分别发出“登录”或“注销”事件。

<template>
  <div id="app">
    <router-view name='login' @login="login=true"></router-view>
    <router-view name='header' @logout="login=false"></router-view>
    <keep-alive v-if="login">
      <router-view name='write'></router-view>
    </keep-alive>
    <router-view name='management'></router-view>
    <router-view name='account'></router-view>
    <router-view name='statistics'></router-view>
    <router-view name='view'></router-view>
    <router-view name='password'></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      login: true
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0;
  height: 100%;
}
</style>

【讨论】：

【解决方案2】：

我遇到了类似的问题，我发现一个简单的解决方案是通过 location.reload() 强制重新加载 Web 应用程序，这会清除 keep-alive。

您可能还会觉得这个讨论很有趣：https://github.com/vuejs/vue/issues/6259

【讨论】：

【解决方案3】：

有一个非常简单的方法可以做到这一点。感谢@loomchild 提供链接。

您可以在路由上定义meta 对象。为使用 keep-alive 的路由定义它，以使其无效。

    {
        path: '/invalidate_me',
        ...
        meta: {uuid: generateUUID()} // You'll need a method for this or something similar
    },

如果需要，请查看 Create GUID / UUID in JavaScript? 以获取有关 UUID 的帮助。

那么，在你的keep alive定义中：

      <router-view :key="$route.path + ($route.params.id ? $route.params.id : '').toString() + ($route.meta && $route.meta.uuid ? $route.meta.uuid.toString() : '')"></router-view>

类似的东西。如果您不包含 id 或不想通过这些来缓存，那很好。这些与问题无关，而是我正在使用的东西。所以你真的只需要meta 部分。我们基本上是在告诉 Vue 考虑由路由上的 id（如果存在）和路由上的 uuid（如果存在）的组合来定义组件

然后，当您想在组件内部无效时，更改 uuid。您可能需要在 $router 的列表中找到路由，或者如果您已经在正确的组件中，您可以这样做：

this.$route.meta.uuid = generateUUID();

这会获取一个新的 uuid 并清除缓存。

希望这对其他人有帮助！

【讨论】：