有一个组件“TableFields.vue”和两个视图文件“Home.vue”。和“Statistics.vue”。在组件中,我在 对象下有 changes: [] 变量。data() 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.vue 页面,以便使用 编写动态表格a> 中看到。 组件的工作代码,可以从根 url changes 数组对象数据。我不确定,我是否需要创建新组件,或者没有它也可以完成。基本上,这是出于测试目的而实现的 TableField.vueHome.vue <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 页面上运行。为了更加方便,这里是 链接 gitlab 存储库。
2 回答
LEATH
TA贡献1936条经验 获得超6个赞
据我所知,更好的解决方案应该是使用 Vuex (https://vuex.vuejs.org/),它允许您将数据存储在称为存储的共享点中。
您也可以使用此处记录的事件:https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events到组件
FFIVE
TA贡献1797条经验 获得超6个赞
用户“异步”来自discord vue chat 已经为我解决了这个问题。
解决方案有点复杂,需要更改几个文件。
如果您想了解更多信息,请参阅 gitlab repo,因为由于其复杂性,我无法在此处记录它。
- 2 回答
- 0 关注
- 130 浏览
添加回答
举报
0/150
提交
取消