Question

我对Vue相当陌生，这就是为什么我无法理解我做错事的原因。

我在视图组件中有一个独立组件，它必须向其他组件发送数据。

该项目包含以下组件：App，Navbar，Home，Statistics，Table和Search。

Search组件内部使用Home组件。它包含<input>以允许用户输入其帐户名称。

Table组件内部使用Statistics组件。它会根据Search组件的输入显示表格。

+-- App
|   +-- Navbar
|   +-- Home
|   +-- ---- Search
|   +-- Statistics
|   +-- ---- Table

我的主App.vue包含router-view：

<template>
<div id="app">

  <Navbar></Navbar>

  <div class="container">
    <router-view></router-view>
  </div>

</div>
</template>

其中两个是主视图组件，它们具有固定路径：Home＆amp; Statistics。路线（router.js）如下：

export default new Router({
  routes: [{
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/statistics',
      name: 'statistics',
      component: Statistics
    }
  ]
})

Navbar组件包含视图组件的router-link：

<template>
  <div id="navbar">
    <nav>
      <ul>
        <li class="active"><router-link to="/">Home</router-link></li>
        <li><router-link to="/statistics">Statistics</router-link></li>
      </ul>
    </nav>
  </div>
</template>

现在：从独立子组件Search获取数据到我的其他独立子组件Table的正确方法是什么？

逻辑方式是Search - ＆gt; Home - ＆gt; App - ＆gt; Statistics - ＆gt; Table。

我已经尝试使用$emit和$on的事件总线，但似乎数据无法通过中间的路由器相互连接。

现在，我的main.js中有一个const来存储这个全局用户数据：

export const store = new Vue({
  data: {
    username: ''
  }
})

我随处导入我需要它，但我非常怀疑这是正确的方法。

我还考虑过为我的Table组件使用道具，但我需要将我的数据从App传递到Statistics到Table，这样可行，但感觉不错像很多样板。另外：我需要先获取App的用户名，然后才能做到这一点，这就是我不知道如何做到这一点。

提前致谢。

Answer 1

可以像你一样使用全球商店，文档甚至还有如何操作的指南：https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch

如果您想要一种更有条理的方式，请查看Vuex，这也是由Vue团队编写的：https://vuex.vuejs.org/

Vuex可以很好地集成到Vue devtools中并回避您所描述的导入/传递问题（因为它是通过Vue.use注入的插件，然后$store可用于每个Vue）

使用路由器将独立子组件的数据传输到其他组件

1 个答案: