Vue Navbar，在Home.vue中调用Function”

Question

我有一个导航栏项目“注销”，我想调用位于我的 Home.vue 中的注销Home.vue 。 Home.vue组件是通过路由器控制的。 Navbar 是孩子，Home.vue 是父母吗？

这是我的App.vue -

<template>
  <div id="app">
    <Navbar />
    <router-view />
    <Footer />
    <footer>
      <cookie-law theme="base"></cookie-law>
    </footer>
  </div>
</template>

我已经尝试了 StackOverflow 中列出的所有选项，但没有成功。 请给出一个例子或链接到适当的主题。

谢谢。

Answer 1

根据应用程序设计和用户案例，用户可以从应用程序中的任何页面执行Logout 。 因此，注销功能应该在母版页（ App.vue ）或公共组件（ Navbar.vue ）本身中全局可用。 通过这样做，我们不需要编写或调用每个组件的注销逻辑。

由于导航栏是整个应用程序的通用组件，并且包含logout按钮。 我认为最好的方法是在这个组件本身内部处理注销功能。

导航栏.vue ：

<button @click="logout">Logout</button>

logout() {
  // Logout functionlity code. for ex. destroy session or cookie or reset any store data.
  // On success navigate the user to the login page 
}

Answer 2

我建议您将注销 function 移动到组件或 App.vue。 你可以在 vue 中通过emit（组件事件）来调用它。

例子：

导航栏.vue

<template>
  <div>
    <button @click="emitLogoutEvent">Logout</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitLogoutEvent() {
      this.$emit("logout");
    }
  }
};
</script>

App.vue

<template>
  <div>
    <Navbar @logout="logout"/>
    <!-- other code -->
  </div>
</template>

<script>
export default {
  methods: {
    logout() {
      // code for logout function
    }
  }
};
</script>