javascript - v-for的每个项目的组件

我的代码才几个月大，仅Vue才几天。因此，我对这个毫无疑问的问题表示歉意，但我有点被困在这里。

我正在尝试呈现大致如下所示的组件结构：

<div id="app">
 <list-component>
     <item-component></item-component>
     <item-component></item-component>
     <item-component></item-component>
  <list-component>
</div>

整个列表来自axios提供的json。到目前为止，一切都很好...问题是：我需要为列表的每个条目创建一个项目组件。

显然，我试图在商品中加入v-for。这样，我可以按预期复制项目组件。但是，我找不到在组件组件模板中正确呈现数据的正确方法。

这是一个jsfiddle，用来说明我正在尝试做的更好的事情：https://jsfiddle.net/devnoob/4r3txkvy/

这个实际的代码并不能解决问题，因为我没有每个项目的组件。

我试过像这个线程VueJS - Component inside of v-for中提到的用道具和v-bind摆弄
 但我找不到使它正常工作的方法。

谢谢 ！

最佳答案

我想您问的是，每个alarm-item组件如何接收和显示其自身的数据？

https://jsfiddle.net/zw7ee4sh/1/

答案是props。
当您需要将数据从父母传递给孩子时，您必须做两件事。


上级：将道具向下传递作为约束
儿童：声明您希望收到的道具。


首先，使用v-for遍历您的警报

<alarms-item v-for="alarm in myAlarms" :alarm="alarm" :key="alarm.id"></alarms-item>

步骤1：在此处将alarm作为道具传递给每个alarms-item

:alarm="alarm"

步骤2：alarms-item组件应声明它希望收到名为alarm的道具。

Vue.component('alarms-item', {
  template: '#alarms-item-template',
  props:['alarm'],
})

在alarms-item模板中，alarm对象现在在作用域内，并且可以根据需要显示alarm对象。在这里，我要遍历所有键/值并打印它们。

<script type="text/x-template" id="alarms-item-template">
    <div>
      <div v-for="(val,key) in alarm">
        {{ key }} - {{ val }}
      </div>
      <hr>
    </div>
</script>

作为学习经验，请尝试从:alarm="alarm"中删除​​v-for。您会看到没有渲染任何内容，因为每个alarm-item组件都没有收到alarm道具，即使您将其声明为道具。您也可以用另一种方法来做，保留:alarm="alarm"并删除props:['alarm']，相同的结果，什么都不会呈现。

关于javascript - v-for的每个项目的组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48029815/