Vue 2 slots are an issue frequently encountered in day-to-day development. This article draws from real-world projects to share concrete implementation approaches and practical takeaways.

Basic Usage

Here is the basic usage:

interface User {
  id: number
  name: string
  email: string
  role: 'admin' | 'user' | 'guest'
}

function createUser(data: Partial<User>): User {
  return {
    id: Date.now(),
    name: data.name || '',
    email: data.email || '',
    role: data.role || 'user'
  }
}

type UserKeys = keyof User  // 'id' | 'name' | 'email' | 'role'

This pattern is concise and well-suited for most scenarios.

Advanced Techniques

The core implementation:

function pluck<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}

const user: User = { id: 1, name: 'Alice', email: 'a@b.com', role: 'admin' }
const name = pluck(user, 'name')   // string
const role = pluck(user, 'role')   // 'admin' | 'user' | 'guest'

In real projects, edge cases and error handling also need careful consideration.

Practical Case

Here is a practical example:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1.5rem;
}

.grid__item {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.grid__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

After rolling this pattern out across the team, the results were great — maintenance costs dropped noticeably.

Notes

Vue 2 has three types of slots: default slots, named slots, and scoped slots. Scoped slots were significantly improved in Vue 2.6 with the new unified v-slot syntax.