VueJS - 将数据从v-for传递到组件，然后传递到另一个组件

Question

我有一个<header-row>组件，我放在所有页面的顶部以显示标题和副标题。这就是我想要做的事情：

• 显示数组中的对象列表，每个项目都可以点击＆＃34;在单独的页面上显示该项目的详细信息（这部分很简单）
• 将项目的字段（如item.display）从列表中传递到下一页prop
• 在新页面中，使用我<header-row>组件中的道具来显示该页面的标题。

似乎很简单，但我无法完成最后两个步骤：

标题组件：

<template>
  <div>
    <h3 class='text-primary'>{{ title }}</h3>
    <h5 class='text-muted'>{{ subTitle }}</h5>
  </div>
</template>

<script>
export default {
  props: [
    'title',
    'subTitle'
  ]
}
</script>

列出项目：

<router-link v-for="item in items" :to="{ name: 'some-page' } myProp="item.name">
    {{ item.display }}
</router-link>

子组件

<template>
  <div>
    <header-row title="myProp"></header-row>
    <div class='container-fluid'>
      <div class='row'>
        <div class='col-4'>
          ... stuff here....
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'child-stuff',
  props: [
    'myProp'
  ]
}
</script>

路由代码：

import Vue from 'vue'
import Router from 'vue-router'

import Dashboard from '@/views/Dashboard'
... more here ....
import AROverview from '@/views/ar/Overview'
import Invoice from '@/views/ar/Invoice'
import APOverview from '@/views/ap/Overview'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'dashboard',
      component: Dashboard
    },
    {
      path: '/receivables/:id',
      name: 'ar',
      component: AROverview
    },
    {
      path: '/invoice/:id',
      name: 'invoice',
      component: Invoice
    },
    ... more ...
    {
      path: '/payables/:id',
      name: 'ap',
      component: APOverview
    }
  ]
})