vue 封装列表组件实例

以下是一个简单的 Vue 列表组件实例的封装：

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

这个组件可以接收一个列表数据作为参数，然后将列表数据渲染成一个无序列表。使用时，只需要将列表数据传递给 `List` 组件的 `list` 属性即可：

<template>
  <div>
    <List :list="items" />
  </div>
</template>

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

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

这样就可以在父组件中使用 `List` 组件，并将列表数据传递给它。在浏览器中查看页面，就可以看到渲染出了一个无序列表，列表中包含了 `Item 1`、`Item 2` 和 `Item 3` 三个元素。