使用vue2 演示封装复杂组件，请给出示例代码

下面是一个使用 Vue 2 封装复杂组件的示例代码：

<template>
  <div>
    <my-complex-component :items="items" @on-select="handleSelect"></my-complex-component>
  </div>
</template>

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

export default {
  components: {
    MyComplexComponent
  },
  data() {
    return {
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' }
      ]
    }
  },
  methods: {
    handleSelect(item) {
      console.log(item)
    }
  }
}
</script>

MyComplexComponent.vue

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id" @click="handleClick(item)">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleClick(item) {
      this.$emit('on-select', item)
    }
  }
}
</script>

这个示例中，我们有一个名为 MyComplexComponent 的组件，它接收一个 items 数组的 prop，并在点击每个项目时发出一个名为 on-select 的事件。在父组件中，我们使用 v-bind 来绑定 items 到子组件上，并使用 v-on 来监听 on-select 事件，调用 handleSelect 方法。