前端Vue列表组件 list组件：实现高效数据展示与交互

<template>
  <div class="list-container">
    <list-item
      v-for="(item, index) in items"
      :key="item.id"
      :item="item"
      :index="index"
      @deleteItem="handleDeleteItem"
    />
  </div>
</template>
 
<script>
import ListItem from './ListItem.vue';
 
export default {
  components: {
    ListItem
  },
  data() {
    return {
      items: [
        // 假设的数据对象数组
        { id: 1, content: 'Item 1' },
        { id: 2, content: 'Item 2' },
        // ...更多数据
      ]
    };
  },
  methods: {
    handleDeleteItem(index) {
      this.items.splice(index, 1);
    }
  }
};
</script>
 
<style scoped>
.list-container {
  /* 样式按需定制 */
}
</style>

这个简单的Vue组件展示了如何使用一个父组件list-container来管理多个子组件list-item。父组件通过v-for指令动态渲染列表项，并通过key属性提供了每个列表项的唯一标识。子组件list-item可以接收来自父组件的item和index属性，并通过自定义事件deleteItem与父组件通信，以便父组件可以更新数据。