vue中的list组件

在Vue中，可以使用`v-for`指令来遍历一个数组或者一个对象，生成相应的DOM元素。而当我们需要渲染一个列表时，可以使用Vue提供的`<template>`标签和`v-for`指令来创建一个列表组件。

下面是一个简单的列表组件示例：

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  name: 'List',
  props: {
    list: {
      type: Array,
      required: true
    }
  }
}
</script>

在这个组件中，我们通过`props`属性定义了一个名为`list`的属性，它的类型是数组，并且是必需的。然后在模板中，我们使用`v-for`指令遍历`list`数组，并将每个元素渲染为`li`标签。

注意，我们还为每个`li`标签设置了一个`key`属性，这是为了让Vue能够高效地更新DOM。`key`属性的值应该是唯一的，通常可以使用数组中每个元素的索引作为`key`。

使用这个列表组件时，只需要将需要渲染的数组传递给它的`list`属性即可：

<template>
  <div>
    <h2>My List</h2>
    <List :list="myList" />
  </div>
</template>

<script>
import List from './List.vue'

export default {
  name: 'App',
  components: {
    List
  },
  data() {
    return {
      myList: ['Item 1', 'Item 2', 'Item 3']
    }
  }
}
</script>

这样就可以在页面中渲染一个简单的列表了。