vue实现一个用户选择器组件供父组件调用

好的，下面给出一个简单的用户选择器组件示例：

<template>
  <div>
    <h3>选择用户</h3>
    <ul>
      <li v-for="user in users" :key="user.id" @click="selectUser(user)">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'UserSelector',
  props: {
    users: {
      type: Array,
      required: true
    }
  },
  methods: {
    selectUser(user) {
      this.$emit('user-selected', user)
    }
  }
}
</script>

这个组件接受一个名为 `users` 的数组作为参数，然后在模板中展示出来，每一个用户条目都可以被点击选择。当用户被选择时，通过 `$emit` 方法向调用方发送一个 `user-selected` 事件，并带上被选择的用户对象。

接下来，我们可以在父组件中使用这个组件，并监听它的 `user-selected` 事件来获取用户选择的结果：

<template>
  <div>
    <h2>用户选择器演示</h2>
    <user-selector :users="users" @user-selected="onUserSelected" />
    <div v-if="selectedUser">
      你选择了：{{ selectedUser.name }}
    </div>
  </div>
</template>

<script>
import UserSelector from '@/components/UserSelector.vue'

export default {
  name: 'UserSelectorDemo',
  components: {
    UserSelector
  },
  data() {
    return {
      users: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' },
        { id: 4, name: '赵六' }
      ],
      selectedUser: null
    }
  },
  methods: {
    onUserSelected(user) {
      this.selectedUser = user
    }
  }
}
</script>

我们将 `UserSelector` 组件放在父组件中，并传入一个 `users` 数组作为参数。当用户选择了一个用户时，我们监听到 `user-selected` 事件，并将结果保存在 `selectedUser` 变量中，然后在模板中展示出来。

这就是一个简单的用户选择器组件的实现方式。当然，这只是一个示例，实际项目中可能需要更多的功能和复杂性。