从组件获取数据到另一个页面视图答案

【问题标题】：Get data from component to another page view从组件获取数据到另一个页面视图
【发布时间】：2020-07-26 09:56:18
【问题描述】：

有一个组件“TableFields.vue”，两个视图文件“Home.vue”和“Statistics.vue”。
在组件中，我在data() 对象下有changes: [] 变量。

  data () {
    return {
      startStopA: true,
      startStopB: true,
      initialValueA: 3,
      initialValueB: 3,
      randomNumbersArray: [],
      randomSignA: '+',
      randomSignB: '+',
      signsArray: ['+', '-'],
      intervalA: null,
      intervalB: null,
      changes: []
    }
  },

changes 数组从calculationsA() 函数动态获取对象。

    calculationsA () {
      this.randomSignA = this.signsArray[
        Math.floor(Math.random() * this.signsArray.length)
      ]
      this.randomSignA === '+'
        ? (this.initialValueA += this.randomNumbersArray[0])
        : (this.initialValueA -= this.randomNumbersArray[0])
      const d = new Date()
      // console.log(d.toLocaleTimeString())
      // console.log(this.randomNumbersArray[0])
      // this.changes.push(this.randomNumbersArray[0])
      // this.changes.push(d.toLocaleTimeString())
      // console.log(this.changes)
      const newChange = {}
      newChange.field = 'A'
      newChange.value = this.randomNumbersArray[0]
      newChange.time = d.toLocaleTimeString()
      this.changes.push(newChange)
    },

如何将changes: [] 从TableField.vue 组件传递到Statistics.vuepage，以便使用changes 数组对象数据编写动态表。我不确定，我是否需要创建新组件，或者没有它也可以完成。基本上，这是来自 TableField.vue 组件的工作代码，它是为测试目的而实现的，可以从 Home.vue 看到，它是根 url。

    <div class="statistics">
      <table>
        <tr>
          <th>Field</th>
          <th>Value</th>
          <th>Time</th>
        </tr>
        <tr v-for="item in changes" :key="item.value">
          <td>{{ item.field }}</td>
          <td>{{ item.value }}</td>
          <td>{{ item.time }}</td>
        </tr>
      </table>
    </div>
  </div>

我需要该代码才能在 Statistics.vue 页面上工作。
这里是link gitlab repo 以便更方便。

【问题讨论】：

标签： javascript html vue.js vue-component pass-data

【解决方案1】：

在我看来，更好的解决方案应该是使用 Vuex (https://vuex.vuejs.org/)，它允许您将数据存储在名为 store 的共享点中。

或者，您可以使用此处记录的事件：https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

【讨论】：

【解决方案2】：

您可以在Statistics.vue 中导入TableField.vue 并将changes: [] 作为道具传递。

【讨论】：

如果我在Statistics.vue 中导入TableFields.vue，我将不得不在模板代码块中声明它<TableFields /> right, which will end up so that Statistics.vue` 页面将与Home.vue 页面相同。您能否给我代码示例，请准确说明我如何使用道具来实现这些目标。我应该把props 声明放在哪里以及如何将它传递给Statistics.vue。只是为了传递changes: [] 值。从昨天开始，我一直在尝试解决这个问题。请记住，TableFields.vue 组件是在Home.vue 中声明的，所以Home.vue = TableFields.vue。

【解决方案3】：

discord vue 聊天中的用户“async”为我解决了这个问题。
解决方案有点复杂，需要更改几个文件。
如果您想了解更多信息，请参阅 gitlab repo，因为由于其复杂性，我无法在此处记录它。

【讨论】：