Vue Navbar，在Home.vue中调用Function”
[英]Vue Navbar, Calling Function in Home.vue"
问题描述
我有一个导航栏项目“注销”，我想调用位于我的 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 中列出的所有选项，但没有成功。 请给出一个例子或链接到适当的主题。
谢谢。
2 条回复
1楼 Rohìt Jíndal 2 2023-01-25 06:39:13
根据应用程序设计和用户案例，用户可以从应用程序中的任何页面执行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
}
2楼 Morteza Sabihi 0 2023-01-24 12:45:48
我建议您将注销 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>
问题未解决？试试以下方法：
未知变量动态导入：../views/Admin/Home.vue Vue3-vue-router4
[英]Unknown variable dynamic import : ../views/Admin/Home.vue Vue3-vue-router4
在我的 vue js 项目中清理 home.vue 文件中的一些代码后，我一直看到这些错误
[英]after cleaning some code in my home.vue file in my vue js project i keep seeing these error
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.