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

如果您尝试访问子组件中的根组件：# Redirect Trailing Slashes If Not A Folder... RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} (.+)/$ RewriteRule ^ %1 [L,R=301]的数据：authenticated，则无法直接访问。

您可以将其作为props传递给导航，导航是向vue中的子组件发送数据的标准实物。

您必须对此进行以下更改。在Navigation vue中添加选项props，如下所示：

Navigation

从 App.vue 的根组件中传递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

Vue.js 2.0 bootstrap app.vue

1 个答案: