vue实现一个高大上的用户选择器组件供父组件调用

好的，我可以给你介绍一下实现一个高大上的用户选择器组件的步骤。

首先，我们要确定这个组件的功能和样式。用户选择器需要有以下基本功能：

1. 显示用户列表。
2. 可以搜索用户。
3. 可以选择多个用户。
4. 可以删除已选择的用户。

根据这些功能，我们可以设计一个基本的用户选择器组件的结构：

<template>
  <div class="user-selector">
    <div class="search-box">
      <input type="text" v-model="searchText" placeholder="搜索用户" />
    </div>
    <div class="user-list">
      <div 
        v-for="(user, index) in userList" 
        :key="index" 
        class="user-item"
        :class="{ active: selectedUserIds.indexOf(user.id) > -1 }"
        @click="toggleUser(user)"
      >
        <div class="user-avatar">
          <img :src="user.avatar" />
        </div>
        <div class="user-name">{{ user.name }}</div>
      </div>
    </div>
    <div class="selected-users">
      <div 
        v-for="(userId, index) in selectedUserIds" 
        :key="index" 
        class="selected-user"
      >
        <div class="user-avatar">
          <img :src="userList.find(u => u.id === userId).avatar" />
        </div>
        <div class="user-name">{{ userList.find(u => u.id === userId).name }}</div>
        <div class="remove-btn" @click="removeUser(userId)">x</div>
      </div>
    </div>
  </div>
</template>

在这个模板中，我们使用了以下数据和方法：

<script>
export default {
  name: "UserSelector",
  props: {
    userList: Array,
    selectedUserIds: Array
  },
  data() {
    return {
      searchText: ""
    };
  },
  methods: {
    toggleUser(user) {
      const index = this.selectedUserIds.indexOf(user.id);
      if (index > -1) {
        this.selectedUserIds.splice(index, 1);
      } else {
        this.selectedUserIds.push(user.id);
      }
    },
    removeUser(userId) {
      const index = this.selectedUserIds.indexOf(userId);
      if (index > -1) {
        this.selectedUserIds.splice(index, 1);
      }
    }
  }
};
</script>

这个组件的样式可以根据自己的喜好进行设计，这里省略。

接下来，我们需要在父组件中调用这个组件。假设我们的父组件是一个表单组件，需要用户选择器来选择该表单的负责人，那么我们可以这样使用：

<template>
  <div class="form">
    <div class="form-item">
      <label for="title">标题：</label>
      <input type="text" id="title" v-model="formData.title" />
    </div>
    <div class="form-item">
      <label for="owner">负责人：</label>
      <user-selector 
        :user-list="userList" 
        :selected-user-ids="formData.ownerIds" 
      />
    </div>
    <div class="form-actions">
      <button @click="submitForm">提交</button>
    </div>
  </div>
</template>

在这个模板中，我们使用了以下数据和方法：

<script>
import UserSelector from "./UserSelector.vue";

export default {
  name: "Form",
  components: {
    UserSelector
  },
  data() {
    return {
      formData: {
        title: "",
        ownerIds: []
      },
      userList: [
        { id: 1, name: "张三", avatar: "https://xxx.com/avatar1.jpg" },
        { id: 2, name: "李四", avatar: "https://xxx.com/avatar2.jpg" },
        { id: 3, name: "王五", avatar: "https://xxx.com/avatar3.jpg" }
      ]
    };
  },
  methods: {
    submitForm() {
      // 提交表单
    }
  }
};
</script>

这样，我们就完成了一个高大上的用户选择器组件，供父组件调用了。