0

我正在玩 vue、vue-router 和 props，但现在我不确定我是否以正确的方式去做。

我有一个像这样的入口组件，一个入口组件应该链接到类似 entryDetails/:id 的东西：

入口.vue

<template>
  <router-link :to="{name:'entryDetails', params:{id: this.id}}">
    <h3>{{ title }}</h3>
    <span>{{ subtitle }}<span>
  </router-link>
</template>

<script>
export default {
  props: {
    id: Number,
    title: String,
    subtitle: String,
    hours: Number
  }
};
</script>

还有一个包含条目列表的组件：

entryList.vue

<template>
  <div class="wrapper">
    <entry :id="1" title="This is a title" subtitle="And a subtitle" :hours="3" />
    <entry :id="2" title="Another title" subtitle="Another subtitle" :hours="8" />
    <entry :id="3" title="Last title" subtitle="Last subtitle" :hours="1" />
  </div>
</template>

<script>
  import entry from "../entry.vue";

  export default {
    components: {
      entry: entry
  };
</script>

现在，当我单击一个条目时，我想转到 entryDetails/:id 以显示道具中的所有信息。像这样的东西：

entryDetails.vue

<template>
  // Show data from props where id is :id from url
  <div class="wrapper">
    <h1>{{ title }}</h1>
    <span>{{ subtitle }}</span>
    <span>Hours: {{ hours }}</span>
  </div>
</template>

<script>
// ??
</script>

这是应该做的方式吗？如果是这样，单击条目后如何从 entryDetails.vue 中的道具中获取数据？

编辑：有一个回复（已删除）说这很容易使用 vuex，否则应该使用参数来完成。Vuex 对我来说是一个选择..但我现在不喜欢使用它。

4

0 回答 0