Question

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

main.js

date(o1.OrderDate) = date(o2.OrderDate)

App.vue

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

List.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
   }
 ]
})

我在控制台中看到警告：

<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>

但是，当我运行此命令时，我看不到表中正在渲染的任何行，实际上该表只是空的（只有标头）。我在连锁店里缺少什么吗？

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
   }
 ]
})

Vue传递道具以路由组件

1 个答案: