vuejs-将数据传递给带有Vue -Router的子流程组件

Question

我不明白如何将'路由组件'加载的数据传递给'subroute component'..（我正在使用vue-router的vue.js）

我的路由器看起来像：

router.map({
  '/a': {
    component: A,
    subRoutes: {
      '/b': {
        component: B
      },
      '/c': {
        component: C
      }
    }
  }
});

我只想共享组件A加载的数据与组件B和c。

预先感谢！

Answer 1

您有两个简单的选项。

丑陋

使用子程序组件中的$parent选项。这使您可以访问父实例，这不是建议的方法，但它是有效的

// from the child component
this.$parent.someData

好

使用道具。道具使您有机会将任何数据从父母传递给孩子。更好，因为防止错误（您传递数据不是实例），并且您仅通过了所需的内容，即使它不是父数据的一部分。

// parent component
<template>
    <child :childsdata="parentdata"></child>
</template
<script>
    export default {
        data: function () {
            return {
                parentdata: 'Hello!'
            }
        }
    }
</script>
// child component
<template>
    {{ childsdata }} <!-- prints "Hello!" -->
</template>
<script>
    export default {
        props: {
            childsdata: {
                type: String
            }
        }
    }
</script>