Question

在我的应用程序中，我有一个根页面。在此根页面中，我包含{{$a="string"}} --> {{$a="string"}} {{$b="{{complex}}"}} --> {{$b="{{complex}}}}"，我尝试从中访问名为Navbar component的变量。我的currentRoute，我定义了index.js：

currentRoute

我有import Vue from 'vue'; import routes from './routes'; var app = new Vue({ el: '#app', data: { currentRoute: window.location.pathname, }, computed: { ViewComponent () { return routes[this.currentRoute] || routes.NotFound; } }, render (h) { return h(this.ViewComponent) } }); window.addEventListener('popstate', () => { app.currentRoute = window.location.pathname; });这是默认路由，我在其中包含了一个名为home.vue的组件，我试图访问Navbar，看起来像：

currentRoute

我的routes.js：

<template lang="jade">
.navbar
    .row
        .col.text-center
            a.post-outline.navbar--icon(href='/new-post', @click="newPost")
        .col.text-center
            i.email-outline.navbar--icon
        .col.text-center
            i.person-outline.navbar--icon
</template>

<script>
import routes from '../../routes';
export default {
    props: {
        href: String,
        required: true
    },
    computed: {
        isActive () {
            return this.href === this.$root.currentRoute
        }
    },
    methods: {
        newPost: event => {
            event.preventDefault();

            this.$root.currentRoute = this.href;

            window.history.pushState(
              null,
              routes[this.href],
              this.href
            )
        },
    },
}
</script>

一切正常，但import NotFound from './pages/404.vue'; import Home from './pages/home.vue'; const NewPost = { template: '<p>new post page</p>' } export default { '/': Home, '/new-post': NewPost }未定义。为什么以及我的错误在哪里？

Answer 1

您的方法newPost()使用ES6 / 2015箭头函数语法(() => {})，它将this绑定到父上下文。在您的情况下，父上下文是模块而不是Vue实例，因此它没有引用$root。

您需要使用正常声明函数：

newPost: function(event) { }

或者，您可以使用ES6 / 2015的简写：

newPost(event) { }

Answer 2

在vue.js中，数据通过props从父级传递给子级。它是通过引用传递的，所以如果你在子代中更改它，它会影响父状态。

无法访问Vue.js中的$ root

2 个答案: