Vue.js 2.0 bootstrap app.vue

Question

私にはわからない奇妙な問題があります。だから、主なApp.vueインスタンスを1つ作った。私はこのようにそれをブートストラップ：

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> 

私は例えば、私のNavigation.vue内app.vueにアクセスしよう：

{{ this.$root.authenticated }} 

何も表示されません。 vuedevtoolsを見ると、メインオブジェクトrootにユーザーオブジェクトが設定されていません。

私はこの仕事を得るために行うために、地球上の何をしましたか！？！？

Answer 1

ルートコンポーネントのデータにアクセスする場合は、子コンポーネントのauthenticated：Navigationを直接使用することはできません。

これは、実際にvueの子コンポーネントにデータを送信するための標準であるナビゲーションに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>' 
}) 

がApp.vueからルートコンポーネントからauthenticatedを渡し、次のように：

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