Vue（ajax、插槽）

在Vue中，使用插槽和Ajax可以创建一个用户列表，当点击列表中的用户时，可以通过Ajax获取用户的详细信息。以下是一个简单的示例：

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id" @click="fetchUserDetails(user.id)">
        {{ user.name }}
      </li>
    </ul>
    <div v-if="selectedUser">
      <slot :user="selectedUser">
        <!-- 默认的用户详情展示 -->
        <p>{{ selectedUser.email }}</p>
      </slot>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      users: [],
      selectedUser: null
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      // 使用Ajax获取用户列表
      axios.get('/api/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error('Fetch error:', error);
        });
    },
    fetchUserDetails(userId) {
      // 使用Ajax获取选中用户的详细信息
      axios.get(`/api/users/${userId}`)
        .then(response => {
          this.selectedUser = response.data;
        })
        .catch(error => {
          console.error('Fetch error:', error);
        });
    }
  }
};
</script>

在这个例子中，我们定义了一个名为UserList的Vue组件，它包含一个用户列表和一个插槽。当用户点击列表中的项目时，会发起一个Ajax请求以获取该用户的详细信息，然后通过插槽展示这些信息。如果需要自定义用户详情的展示方式，可以在插槽中定义，否则会显示用户的邮箱。