VueJs - 使用 vue-router 将数据传递给 subRoutes 组件

Question

我不明白如何将 'route Component' 加载的数据传递给 'subRoute Component'.. （我在 Vue-router 中使用 Vue.js）

我的路由器是这样的：

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

我只想将组件A加载的数据共享给组件B和C。

提前致谢！

Answer 1

你有两个简单的选择。

丑

使用子路径组件中的 $parent 选项。这使您可以访问 parent 实例，这不是推荐的方法，但它是有效的

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

不错

使用props。 Prop 让您有机会将任何数据从 parent 传递到 child。它更好，因为它可以防止错误（你传递的是数据而不是实例）并且你只传递你需要的东西，即使它不是 parent 数据的一部分。

// 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>

VueJs - 使用 vue-router 将数据传递给 subRoutes 组件

VueJs - Passing data to subRoutes component with vue-router

vue.js

vue-router