Vue.js 2.0 bootstrap app.vue

Question

У меня странная проблема, которую я не понимаю. Поэтому я создал один из основных экземпляров App.vue. Я самонастройки это так:

import Strip from './Components/Shared/Strip.vue'; 
import Bar  from './Components/Shared/Bar.vue'; 
import App  from './Components/App.vue'; 
import router from './router'; 
import Vue  from 'vue' 

/** 
* We'll register all global components here. So we will be able to use it 
* across the entire application. 
*/ 

Vue.component('bar', Bar); 
Vue.component('strip', Strip); 

/** 
* We'll require a bootstrap file where all important things are being initialized. 
*/ 

require('./bootstrap'); 

/** 
* We'll bind the vue instance to #app. That's being used in the main 
* index.blade.php file. 
*/ 

const app = new Vue({ 
    router, 
    render: h => h(App) 
}).$mount('#app'); 

index.blade.php

<div id="app"></div> 

Тогда в моем App.vue:

<template> 
    <div class="container"> 
     <navigation></navigation> 
     <main> 
      <router-view 
        transition 
        transition-mode="out-in"> 
      </router-view> 
     </main> 
     <mainfooter>Company</mainfooter> 
    </div> 
</template> 

<script> 
    import Auth   from "../Services/Authentication/Auth"; 
    import Navigation from './Shared/Navigation.vue'; 
    import Mainfooter from './Shared/Footer.vue'; 
    import Swal   from 'sweetalert'; 

    export default { 
     components: { Navigation, Mainfooter }, 

     data() { 
      return { 
       user: { role: 1 }, 
       authenticated: false 
      } 
     }, 

     methods: { 
      userHasLoggedIn(user) { 
       this.user = user; 
       this.authenticated = true; 
      } 
     } 
    } 
</script> 

Когда я пытаюсь получить доступ к app.vue в моей Navigation.vue, например, :

{{ this.$root.authenticated }} 

Ничего не появляется. И когда я смотрю в vuedevtools, пользовательский объект не устанавливается в основном root экземпляре.

Что на земле, Я сделать, чтобы заставить это работать!?!?

Answer 1

Если вы пытаетесь получить доступ к данным корневого компонента: authenticated в дочернем компоненте: Navigation, это невозможно напрямую.

Вы можете передать его как props в навигацию, которая является стандартом для отправки данных дочерним компонентам в vue.

Для этого вам необходимо внести следующие изменения. добавить опцию props в навигации вю, как следующее:

Vue.component('navigation', { 
    // declare the props 
    props: ['authenticated'], 
    // just like data, the prop can be used inside templates 
    // and is also made available in the vm as this.message 
    template: '<span>{{ authenticated }}</span>' 
}) 

передать authenticated от корневого компонента из App.vue, как следующее:

<template> 
    <div class="container"> 
     <navigation :authenticated="authenticated"></navigation> 
     <main> 
     .... 
     ....