然而,任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。为了把迭代数据传"/>

Vue.在组件上使用 v-for

Vue.在组件上使用 v-for
在组件上使用 v-for
 
如果你还没了解组件的内容,可以先跳过这部分。
 
在自定义组件上,你可以像在任何普通元素上一样使用 v-for:
 
<my-component v-for="item in items" :key="item.id"></my-component>
然而,任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。为了把迭代数据传递到组件里,我们要使用 props:
 
<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>
不自动将 item 注入到组件里的原因是,这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。
 
下面是一个简单的 todo 列表的完整例子:
 
实例
<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    />
    <button>Add</button>
  </form>
  <ul>
    <todo-item
      v-for="(todo, index) in todos"
      :key="todo.id"
      :title="todo.title"
      @remove="todos.splice(index, 1)"
    ></todo-item>
  </ul>
</div>

推荐阅读