Vue 传递 props 来路由组件

Question

我正在尝试通过路由器将数据从 Vue 实例传递到组件。我尝试按照堆栈溢出中的文档和示例进行操作，但无法使其正常工作。我正在尝试传递一个名为“funds”的道具，下面是我的脚本和组件：

main.js

new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  data: {
    funds: [...]
  },
  template: '<App :funds="funds"/>'
});

App.vue

<template>
  <div id="app">
    ...
    <router-view :funds="funds" />
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

Vue.use(Router)

export default new Router({
 routes: [
   ...
   {
     path: '/funds',
     name: 'funds',
     component: List
   }
 ]
})

List.vue

<template>
  <div>
    <table class="table table-striped">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="fund in funds" :key="fund.name">
          ...
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'List',
    props: ['funds']
  }
</script>

我在控制台中看到一条警告：

[Vue warn]: Property or method "funds" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

found in

---> <App> at src/App.vue
       <Root>

但是，当我运行它时，我看不到表中的任何行正在呈现，实际上表只是空的（只有标题）。我是否遗漏了链条中的某些内容？

Answer 1

在App.vue中，也需要添加props，如下图；

<template>
  <div id="app">
    ...
    <router-view :funds="funds" />
  </div>
</template>

<script>
  export default {
    name: 'App',
    props: ['funds']
  }
</script>

Vue.use(Router)

export default new Router({
 routes: [
   ...
   {
     path: '/funds',
     name: 'funds',
     component: List
   }
 ]
})