兄弟コンポーネントが変更されたときの静的な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> isn値が再読み込みされませんページを更新しない限り変更されません。新しいコンポーネントが読み込まれるたびにヘッダを更新する方法はありますか？

Answer 1

this.$root.$emit('event', data)を1つのコンポーネントで使用し、this.$root.$on('event', (data) => {})でイベントを取得することで回避策が見つかりました。

これは、ヘッダーコンポーネントを問題なく更新するようです。