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

Posted 2023-02-23

【中文标题】VueJS：通过路由器视图将数据从根元素传递到子组件

【英文标题】：VueJS: Passing data from root element to child components through router-view

【发布时间】：2018-07-06 11:33:20

【问题描述】：

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

但是，我最近开始使用 vue-router，而我的根 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 调用的子元素会是一种更好的方法

【参考方案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 属性。

随着您的应用程序变得越来越复杂，vuex（或您选择的状态管理器）将是一个更适合使用的工具。当你适应它并学习一些非常好的技巧时，你会发现你错过了什么:)。

【讨论】：

感谢您这么快回来。由于我正在寻找传递非特定于路线的变量 - 我不确定这是针对我的特定情况的最佳方法。例如，我的几个子组件对本地/生产服务器进行 API 调用（取决于节点环境），我发现自己多次复制“if”语句逻辑。所以我认为在根元素中声明一个“服务器”变量，然后将其传递给需要它进行 API 调用的子元素会是一种更好的方法。

Imo，这是使用状态管理系统的另一个原因。原因如下：我使用 vuex actions 进行 api 调用。每个模块都有典型的 CRUD 路由以及定义和包装在操作中的任何特定路由。即名为 fetchUser 的操作，在操作 axios 中发出 api 请求。响应存储在状态中，并且我的子组件已计算（使用 mapGetters）以在收到响应时做出反应。如果我需要在 api 调用之前设置数据，父组件简单地在 store 中设置它。你能举一个你拥有的特定用例的例子吗？

另一个想法，也许动态组件对您的情况有用。为每个案例创建一个特定的组件，并根据您需要调用的服务器实例化适当的组件。 vuejs.org/v2/guide/components.html#Dynamic-Components

我认为这将是正确的选择。就像我说的那样，随着您的应用程序的增长以及您对 vuex 的熟悉程度越来越高，这似乎是一件轻而易举的事。这是一个与商店一起使用的 axios 示例。 jsfiddle.net/jonataswalker/416oz6ga

alligator.io 有一些很好的教程。 alligator.io/vuejs/intro-to-vuex。我最近也发现了这个 repo。 github.com/christianmalek/vuex-rest-api