如何使用编程导航 Vue.js 传递数据？ [复制]答案

【问题标题】：How to pass data with programmatic navigation Vue.js? [duplicate]如何使用编程导航 Vue.js 传递数据？ [复制]
【发布时间】：2020-12-08 02:49:34
【问题描述】：

const editUser = (e) => {
  dataRow.push({
    firstName: e.detail.firstName,
    lastName: e.detail.secondName,         
    emailAddress: e.detail.emailAddress
  })
  router.push({name: 'editPage', params: { dataRow }})
  console.log(dataRow)
}

我想将 dataRow 传递给另一个组件来编辑用户详细信息。 dataRow 已正确分配并显示在控制台中，但我不确定如何将其推送到编辑页面。下面是我的路由器代码。

{
  path: '/edit', 
  name: 'editPage', 
  component: () => import('./pages/UsersEdit.vue'), 
  beforeEnter: authGuard, 
  props: true 
},

如何在组件之间传递和接收数据？

以下是我在导出默认值和 html 中调用道具的代码

<div>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="firstname" v-model="dataRow.firstName">
</div>

props: {
dataRow: {
  type: Object
}

【问题讨论】：

这能回答你的问题吗？ VueJS: dynamic component loses it`s props after reloading
我能想到的唯一方法是使用参数？但我的问题是你为什么不使用 vuex？
@Phil 是的，你给我的链接有帮助。非常感谢！但是，我的 dataRow 在子组件中显示为未定义。有什么想法吗？
这完全取决于您未显示的组件内容。另外，为什么dataRow 是一个数组？
@Phil 我从我的子组件中添加了更多代码以及我如何调用道具。设置props是不是设置数组不对？

标签： vue.js vue-router

【解决方案1】：

您必须创建一个共享组件/服务文件，其中将存储被多个组件使用的共享变量
在您要获取和更新数据的两个组件中调用该组件
即使数据发生变化，它也会保持其状态

【讨论】：