Question

通常，当我有一个多个子组件应该能够访问的变量时，我将它们存储在我的根Vue元素的数据对象中，然后通过属性将它们传递给子组件。

但是，我最近进步到使用vue-router，我的root vue元素只包含一个“router-view”组件，它控制向用户提供的子组件。

以下是我的根元素的样子（我正在使用vue-cli）：

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>

<script>
    export default {
        name: 'app'
    }
</script>

<style lang="scss">

</style>

因此，在使用vue路由器之前通过属性将变量传递给子组件的方法似乎不再可行。

我应该如何通过vue路由器将数据从我的根Vue元素传递到我的子组件？我是否应该使用这种方法来实现访问“全局”变量的目标？

我已经阅读了几个使用Vuex进行状态管理的线程，虽然我没有反对学习和使用它 - 但是对于我在这个阶段想要实现的目标感觉有点过分。

编辑（澄清问题）

我的几个子组件对本地/生产服务器进行API调用（取决于节点环境），我发现自己多次复制“if-else”逻辑以确定组件应该在哪个服务器进行API调用至。所以我认为在根元素中声明“服务器”变量然后将其传递给需要进行API调用的子元素是一种更好的方法

Answer 1

Vuex是一个很棒的工具，但是，如果您尝试将一些基本数据（例如记录ID）传递给子组件，那么您应该查看路径道具。

https://router.vuejs.org/en/essentials/passing-props.html

使用路径路径道具，您可以以正常方式在子组件中声明道具。但是，必须命名相同的是路由属性。

// child component
props: ['id']

// route definition
{ path: '/item/:id', component: Item, props: true },

如您所见，:id随后会传递给子组件id prop。

随着您的应用程序的复杂性增加，vuex（或您选择的州经理）将是一个更合适的工具。当你对它感到满意并学习一些非常好的技巧时，你会看到你所缺少的东西:)。

VueJS：通过路由器视图将数据从根元素传递到子组件

1 个答案: