형제 구성 요소가 변경 될 때 정적 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> 

무엇 나는 사용자가 로그인 할 때 "로그 아웃"을 표시하는 단추를 원합니다. 사용자가 로그인하면 사용자가 로그인했는지 여부를 확인하는 데 사용하는 쿠키를 얻습니다. 그러나 <appheader> isn이 아니기 때문에 값이 다시로드되지 않습니다. 페이지를 새로 고침하지 않으면 변경되지 않습니다. 새 구성 요소가로드 될 때마다 헤더를 업데이트 할 수 있습니까?

Answer 1

한 구성 요소에 this.$root.$emit('event', data)을 사용하고 this.$root.$on('event', (data) => {})을 사용하여 이벤트를 픽업하여 해결 방법을 찾았습니다.

이 문제는 헤더 구성 요소를 아무 문제없이 업데이트하는 것으로 보입니다.