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

Question

我刚接触代码几个月，只接触 Vue 才几天。所以我为这个菜鸟问题道歉，但我有点被困在这里。

我正在尝试渲染一个大致如下所示的组件结构:

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

整个列表来 self 通过 axios 获得的 json。到目前为止，一切顺利......问题是:我需要为列表的每个条目创建一个项目组件。

显然我试图在我的项目中放置一个 v-for。通过这样做，我可以按预期复制项目组件。但是后来我找不到在项目组件模板中正确呈现数据的正确方法。

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

这段实际代码并没有起到作用，因为我没有为每个项目准备一个组件。

我尝试按照本帖 VueJS - Component inside of v-for 中的说明摆弄 props 和 v-bind 但我找不到让它正常工作的方法。

谢谢!

Answer 1

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

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

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

1. 父级:将 prop 作为绑定(bind)传递
2. child :声明您希望收到的 Prop 。

首先，使用 v-for 迭代您的警报

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

第 1 步:这是将 alarm 作为 prop 传递给每个 alarms-item

的地方

:alarm="alarm"

第 2 步:alarms-item 组件应该声明它期望接收一个名为 alarm 的 prop。

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>

作为学习经验，尝试从 v-for 中删除 :alarm="alarm"。你会看到什么都没有呈现，因为每个 alarm-item 组件都没有收到 alarm Prop ，即使你将它声明为 Prop 。你也可以反其道而行之，保留 :alarm="alarm" 并删除 props:['alarm']，同样的结果，没有任何渲染。