[英]Update element in static vue component when sibling component changes
This is my first time asking a question so I'm hoping I get this right.这是我第一次提问,所以我希望我做对了。
I have a project where my App.vue template looks like this:我有一个项目,其中我的 App.vue 模板如下所示:
<template>
<div id="app">
<appheader></appheader>
<router-view></router-view>
<appfooter></appfooter>
</div>
</template>
And in my <appheader>
component i have a login button that redirects to the login page:在我的
<appheader>
组件中,我有一个重定向到登录页面的登录按钮:
<router-link tag="div" to="/login">
<a>
<div class="signInButton">
<div class="lockWrapper">
<img class="lock" src="../assets/lock.svg" alt="">
</div>
<h4 class="loginText">Log in</h4>
</div>
</a>
</router-link>
What I want is for the button to show "Log out" when the user is logged in. When the user logs in they get a cookie that i use to verify in components if a user has logged in or not, but since the <appheader>
isn't reloaded, the value doesn't change unless I refresh the page.我想要的是当用户登录时按钮显示“注销”。当用户登录时,他们会得到一个 cookie,我用它来验证用户是否已登录,但由于
<appheader>
不会重新加载,除非我刷新页面,否则该值不会更改。 Is there a way to update the header whenever a new component is being loaded?有没有办法在加载新组件时更新标题?
Found a work-around by using this.$root.$emit('event', data)
in one component and picking up the event with this.$root.$on('event', (data) => {})
. 通过在一个组件中使用
this.$root.$emit('event', data)
并使用this.$root.$on('event', (data) => {})
拾取事件,找到了一种解决方法this.$root.$emit('event', data)
。
This seemed to update the header component without any problems. 这似乎可以更新标题组件,而不会出现任何问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.