深入理解Vue的组件通信机制Slot-Scope(v-slot)使用场景 – 提升组件复用性的利器

<template>
  <div class="user-card">
    <div class="avatar">
      <slot name="avatar" :user="user"></slot>
    </div>
    <div class="username">
      <slot name="username" :user="user"></slot>
    </div>
    <div class="other-info">
      <slot name="other-info" :user="user"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserCard',
  data() {
    return {
      user: {
        avatar: 'https://via.placeholder.com/150',
        username: 'John Doe',
        email: 'johndoe@example.com',
        age: 30
      }
    }
  }
}
</script>

<user-card>
  <template v-slot:avatar="slotProps">
    <img :src="slotProps.user.avatar" alt="Avatar">
  </template>
  <template v-slot:username="slotProps">
    <h3>{{ slotProps.user.username }}</h3>
  </template>
  <template v-slot:other-info="slotProps">
    <p>Email: {{ slotProps.user.email }}</p>
    <p>Age: {{ slotProps.user.age }}</p>
  </template>
</user-card>

<user-card>
  <template v-slot:[dynamicSlotName]="slotProps">
    <!-- 根据dynamicSlotName渲染不同的内容 -->
  </template>
</user-card>

<outer-component>
  <template v-slot:default="outerSlotProps">
    <inner-component>
      <template v-slot:default="innerSlotProps">
        <!-- 可以同时访问outerSlotProps和innerSlotProps -->
      </template>
    </inner-component>
  </template>
</outer-component>

<user-card>
  <template v-slot:default="slotProps">
    <!-- 利用slotProps访问setup函数返回的数据 -->
  </template>
</user-card>

<script>
export default {
  setup() {
    // 在setup函数中定义组件内部的状态和方法
    const user = { ... }
    return { user }
  }
}
</script>