首页 / 知识

Vue.在组件上使用 v-for

2023-04-11 16:34:00

在组件上使用 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 列表的完整例子：

实例

<input

v-model="newTodoText"

id="new-todo"

placeholder="E.g. Feed the cat"

</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>