Question

所以，我有一个Vuex状态，看起来像这样：

state: {
  keylist: ['key1', 'key2', 'key3'],
  items: {
    key1: {title: "First Item"},
    key2: {title: "Second Item"},
    key3: {title: "Third Item"}
  }
}

我有一个列表组件，像这样从root引用：

<event-list :list="this.$store.state.keylist"></event-list>

组件的定义如下：

Vue.component('event-list', {
  template: "<ul><li v-for='key in list'>{{ key }}</li></ul>",
  props: {
    list: {
      type: Array,
      required: true
    }
  }
})

现在，这一切都很好地显示了密钥。

但是，当然，我真正想做的是在每个项目上使用组件，该组件由其键找到。那就是我被困住的地方。我有一个类似这样的项目组件：

Vue.component('event-list-item', {
  template: "<h4>{{ item.title }}</h4>",
  props: {
    item: {
      type: Object,
      required: true
    }
  }
})

但是我不知道如何将父组件中的key转换为子组件中的item。此模板在第一个花括号上倒转：

<ul><li v-for='key in list'><event-list-item :item="this.$store.state.items.{{key}}"</li></ul>

在任何情况下，这都不像正确的解决方案那样！那么什么是正确的呢？

Answer 1

对我来说，首先想到的是您嵌套的物品无处可放。您可能想看看用于嵌套这样的组件的插槽： https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots

无论如何，一些注意事项：

在您的用例中，最好将列表包含在事件列表项中，并仅重复实际需要的元素，而不是在仅包裹另一个组件的无用组件中检索它。我的意思是：

Vue.component('event-list-item', {   template: "<li v-for="item in list"><h4>{{ item.title }}</h4></li>

商店被认为是唯一的真理来源，因为它应该更容易从直接受影响的组件中访问它，从而使您不必为多层分发多个道具。就像你在做。对于深层嵌套的组件，此基础有点脆弱。

请记住，每个组件都有不同的作用域，它们不会共享未明确传递的内容。

Answer 2

您应该访问items之类的状态key字段：

   <ul><li v-for='key in list'><event-list-item :item='key' /></li></ul>

及其子组件中：

   template: "<h4>{{ store.state.items[item].title }}</h4>"

Answer 3

遍历items对象的属性没有问题。它将与遍历数组相同。

<ul>
  <li 
    v-for="item in items"
    :key="item.title"
  >
    <event-list-item :item="item" />
  </li>
</ul>

为了更好的实践，您可以在getter内格式化数据，分配键并返回准备渲染的列表，这样就不会将其他逻辑委派给组件。

请注意，代码示例中使用的key供Vue内部使用，因为它是保留的special attribute，建议在使用v-for循环时出现。

如何将Vuex列表中的项目传递给组件？

3 个答案: