Vue2의 다른 구성 요소에서 구성 요소 업데이트

Vue2의 다른 구성 요소에서 구성 요소 업데이트

저는 2개의 컴포넌트가 있습니다.header 및 login.

인헤더

<a v-if="isLoggedIn" href="/#/insurance">
 <img src="@/assets/images/user.svg" class="profile_img">
 </a>
 <a v-else href="/#/login">
 <img src="@/assets/images/login.svg" class="profile_img">
 </a>

전환하고 싶다isLoggedIn true그리고.false에header에서 메서드가 호출되는 동안login

로그인 시 이 내용을 입력해 보았습니다.

var userState = new Vue();
 userState.$emit('userState', true)

그리고 이건 머리글에 있는

updated(){
    userState.$on('userState', function(state) {
      this.isLoggedIn = state
    })

하지만 그것은 효과가 없다.저 좀 도와 주시겠어요?고마워요.

일반적인 솔루션은 Vuex(상태 관리 모듈)를 사용하는 것입니다.Vuex에 대한 답변은 생략하겠습니다.추천만 할게요.그것은 견고하고, 당신이 생각하는 것보다 더 빨리 필요할 것입니다.사용.Vue.observable(아래 참조)는 단순한 경우에만 유용합니다.필요할 때async동작 Vuex 사용을 시작해야 할 때입니다.

---

보다 심플한 솔루션은 다음과 같습니다.Vue.observable():

선언하다Vue.observable()두 구성 요소 간에 공유할 내용이 들어 있습니다.파일을 파일에 저장하고 내보냅니다. 예:

export default Vue.observable({
  isLoggedIn: false
})

해당 상태 개체를 읽거나 쓰려는 구성 요소에서 해당 개체를 가져옵니다.

import userState from '../path/to/userState.js'

읽기만 원하는 경우 단순 계산으로 사용합니다.

computed: {
  isLoggedIn() { return userState.isLoggedIn }
}

여기에 쓰려면 setter + getter computed로 사용합니다.

computed: {
  isLoggedIn: {
    get() { return userState.isLoggedIn; } 
    set(value) { userState.isLoggedIn = value; }
  }
}

바로 그거에요, 정말.작업 예:

const userState = Vue.observable({
  isLoggedIn: false
});

Vue.component('header-component', {
  template: `
<label>
  <input type="checkbox" v-model="isLoggedIn">
  Logged in
</label>
  `,
  computed: {
    isLoggedIn: {
      get() {
        return userState.isLoggedIn
      },
      set(value) {
        userState.isLoggedIn = value
      }
    }
  }
});

Vue.component('footer-component', {
  template: `<pre v-text="{ isLoggedIn }"></pre>`,
  computed: {
    isLoggedIn() {
      return userState.isLoggedIn
    }
  }
});

new Vue({
  el: '#app'
})

body {
  margin: 0;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#app>* {
  padding: 1rem;
  border: 1px solid #eee;
}

#app main {
  flex-grow: 1;
}

#app pre {
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="app">
  <header-component></header-component>
  <main>main content here...</main>
  <footer-component></footer-component>
</div>

---

주의:Vue.observable()Vue에 도입되었습니다.2.6.
이전 버전에서 이 기능을 사용하려면 관찰 가능한 인스턴스 대신 Vue 인스턴스를 사용할 수 있습니다.
Vue 인스턴스가 아닌 완전한 Vue 인스턴스 사용Vue.observable는 Vue 인스턴스가 제공해야 하는 모든 것(watchers, computed, methods - 비동기일 수 있음 등)에 액세스 하는 경우에도 편리합니다.

const userState = new Vue({
  data: () => ({
    isLoggedIn: false
  })
});

기능 확인(내)2.5):

const userState = new Vue({
  data: () => ({
    isLoggedIn: false
  })
});

Vue.component('header-component', {
  template: `
<label>
  <input type="checkbox" v-model="isLoggedIn">
  Logged in
</label>
  `,
  computed: {
    isLoggedIn: {
      get() {
        return userState.isLoggedIn
      },
      set(value) {
        userState.isLoggedIn = value
      }
    }
  }
});

Vue.component('footer-component', {
  template: `<pre v-text="{ isLoggedIn }"></pre>`,
  computed: {
    isLoggedIn() {
      return userState.isLoggedIn
    }
  }
});

new Vue({
  el: '#app'
})

body {
  margin: 0;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#app>* {
  padding: 1rem;
  border: 1px solid #eee;
}

#app main {
  flex-grow: 1;
}


#app pre {
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17"></script>
<div id="app">
  <header-component></header-component>
  <main>main content here...</main>
  <footer-component></footer-component>
</div>

언급URL : https://stackoverflow.com/questions/67331891/update-a-component-from-another-component-in-vue2