Question

所以我试图围绕如何使用vue-loader用于Webpack，vue-router用于路由，以及如何使用共享数据模型。我的理解是你创建了一个数据模型，然后将它传递给每个组件，并认为它们具有共享状态。您似乎也应该使用数据模型而不是道具，因为它允许双向绑定。

我尝试了一些事情，但似乎没有任何效果。我尝试在路由器中传递data，但这并没有解决它。

我将此作为我的主要app.js：

var $ = require('jquery'),
    Vue = require('vue'),
    VueRouter = require('vue-router');

Vue.use(VueRouter);

var first = require('vue!./first.vue');
var second = require('vue!./second.vue');

var sourceOfTruth = {
    msg: "my message"
};

var App = new Vue({
  data: sourceOfTruth,
});

var router = new VueRouter({
    history: true
});

router.map({
    '/foo': {
        data: sourceOfTruth,
        component: first
    },
    '/bar': {
        data: sourceOfTruth,
        component: second
    }
});

router.start(App, '#app');

这是我的first.vue：

<template>
    The message goes here -> {{ msg }}
</template>

<script type="text/javascript">
    // ???
</script>

有什么想法吗？谢谢！

Answer 1

查看this非常好的文章，该文章涉及独立组件之间的通信。它还介绍了使用Vuex的Flux思维方式。一般来说，您应该可以使用共享存储实例，您可以将其从单独的文件中导入每个组件，并通过分配每个组件的数据使其成为被动的。

<template>
    {{ sourceOfTruth.msg }}
</template>

<script>
    import store from '../store'

    export default {
       data () {
          return {
            sourceOfTruth : store.sourceOfTruth 
         }
      } 
   }
</script>

Answer 2

不会像组件数据字段那样访问发送的自定义数据字段。您正在尝试{{ msg }}，这会在您的组件中查找msg字段。

要访问通过路由器发送的数据，

{{ $route.data }}

现在，因为在你的情况下，数据依次是json，你会做

{{ $route.data.msg }}

如何使用webpack在Vue.js中的路由组件之间共享数据？

2 个答案: