Vue中如何从页面布局经父组件插槽向子Card组件传递title属性？

嘿，我来帮你搞定这个问题！你要实现的是让Card组件能拿到父页面中<Card>标签上绑定的title，并且这个属性得经过Cards组件的插槽传递，对吧？下面我分Vue3和Vue2两种常用场景给你写具体的实现代码：

一、Vue3 实现方式 #

1. 定义Card组件 (Card.vue) #

Card组件通过props接收title，这是最规范的属性传递方式：

<template>
  <div class="card">
    <!-- 使用接收到的title渲染标题 -->
    <h3 class="card-title">{{ title }}</h3>
    <slot></slot> <!-- Card自身的插槽，用于放置自定义内容 -->
  </div>
</template>

<script setup>
// 定义title的props规则
const props = defineProps({
  title: {
    type: String,
    required: true
  }
})
</script>

<style scoped>
.card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}
.card-title {
  margin-top: 0;
  color: #333;
}
</style>

2. 定义Cards容器组件 (Cards.vue) #

分两种情况：

情况1：仅作为容器传递属性

如果不需要对title做额外处理，Cards组件只需要渲染插槽即可——父页面绑定在<Card>上的title会自动通过插槽传递给Card的props：

<template>
  <div class="cards-wrapper">
    <!-- 直接渲染插槽，属性会自动向下传递 -->
    <slot></slot>
  </div>
</template>

<script setup>
// 无需额外逻辑，仅作为布局容器
</script>

<style scoped>
.cards-wrapper {
  padding: 20px;
  background-color: #f5f5f5;
}
</style>

情况2：在Cards层统一处理title

如果需要对title做全局处理（比如添加公共前缀、格式化），就用作用域插槽让Cards把处理后的数据传递给插槽内的Card：

<template>
  <div class="cards-wrapper">
    <!-- 定义作用域插槽，传递处理后的title -->
    <slot :processedTitle="processedTitle"></slot>
  </div>
</template>

<script setup>
import { computed } from 'vue'

// Cards组件接收一个基础前缀props
const props = defineProps({
  baseTitle: {
    type: String,
    default: ''
  }
})

// 统一处理title的逻辑
const processedTitle = computed(() => {
  return props.baseTitle ? `${props.baseTitle}-` : ''
})
</script>

对应的父页面使用方式：

<template>
  <Cards baseTitle="全局前缀">
    <!-- 通过作用域插槽接收处理后的title，再传递给Card -->
    <template #default="{ processedTitle }">
      <Card :title="`${processedTitle}我的卡片标题`" />
    </template>
  </Cards>
</template>

<script setup>
import Cards from './Cards.vue'
import Card from './Card.vue'
</script>

二、Vue2 实现方式 #

1. Card组件 (Card.vue) #

<template>
  <div class="card">
    <h3 class="card-title">{{ title }}</h3>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
/* 样式同Vue3示例 */
</style>

2. Cards组件 (Cards.vue) #

情况1：仅作为容器传递属性

<template>
  <div class="cards-wrapper">
    <slot></slot>
  </div>
</template>

<script>
export default {
  // 无需额外逻辑
}
</script>

情况2：统一处理title（作用域插槽）

<template>
  <div class="cards-wrapper">
    <slot :processedTitle="processedTitle"></slot>
  </div>
</template>

<script>
export default {
  props: {
    baseTitle: {
      type: String,
      default: ''
    }
  },
  computed: {
    processedTitle() {
      return this.baseTitle ? `${this.baseTitle}-` : ''
    }
  }
}
</script>

对应的父页面使用方式：

<template>
  <Cards baseTitle="全局前缀">
    <template slot="default" slot-scope="{ processedTitle }">
      <Card :title="`${processedTitle}我的卡片标题`" />
    </template>
  </Cards>
</template>

<script>
import Cards from './Cards.vue'
import Card from './Card.vue'

export default {
  components: { Cards, Card }
}
</script>

关键说明 #

• 如果不需要对title做中间处理，Cards组件仅作为布局容器即可，父页面绑定在<Card>上的title会自动通过插槽传递给Card的props，这已经满足“通过Cards插槽传递”的要求。
• 如果需要在Cards层统一管理title的格式或内容，作用域插槽是最灵活的实现方式，能让Cards组件向插槽内的Card传递处理后的数据。

内容的提问来源于stack exchange，提问作者user479947