当同级组件更改时更新静态 vue 组件中的元素

Question

这是我第一次提问，所以我希望我做对了。

我有一个项目，其中我的 App.vue 模板如下所示：

<template>
  <div id="app">
    <appheader></appheader>
    <router-view></router-view>
    <appfooter></appfooter>
  </div>
</template>

在我的<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>

我想要的是当用户登录时按钮显示“注销”。当用户登录时，他们会得到一个 cookie，我用它来验证用户是否已登录，但由于<appheader>不会重新加载，除非我刷新页面，否则该值不会更改。 有没有办法在加载新组件时更新标题？

Answer 1

通过在一个组件中使用this.$root.$emit('event', data)并使用this.$root.$on('event', (data) => {})拾取事件，找到了一种解决方法this.$root.$emit('event', data) 。

这似乎可以更新标题组件，而不会出现任何问题。

Answer 2

现在你可以使用 Vuex 来存储你的状态。 更多信息： Vuex