Vue 3中如何从Form组件向深层子组件Button传递文本值？

针对你的组件结构，有两种常用方案实现文本从Form.vue传递到Button.vue，下面分别说明：

方案一：Props逐层传递（适合层级较少的场景） #

这种方式直接通过组件props逐层向下传递文本值，需要先修正现有组件中的错误：

1. 修正Form.vue #

可以直接给Card组件传递目标文本，或者让Form接收外部传入的文本再传递：

<template>
  <div>
    <!-- 直接传递自定义文本，或者绑定Form的props -->
    <Card text="从Form传递的目标文本" />
  </div>
</template>

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

// 可选：如果需要Form接收外部传入的文本，添加以下代码
// const props = defineProps({
//   formText: {
//     type: String,
//     default: '默认文本'
//   }
// })
// 然后Card的text改为 :text="props.formText"
</script>

2. 修正Card.vue #

核心是把Card接收的text正确绑定给Button组件，而不是传字符串字面量：

<template>
  <!-- 使用v-bind（简写:）绑定props的text到Button -->
  <Button :text="text">
    <!-- 若需要父组件自定义Button内容，这里可以转发Button暴露的slot属性 -->
    <template #default="buttonSlotProps">
      <button>{{ buttonSlotProps.text }}</button>
    </template>
  </Button>
</template>

<script setup>
import Button from './Button.vue'

const props = defineProps({
  text: {
    type: String,
    required: true
  }
});
</script>

3. Button.vue保持不变 #

它已经正确接收text props，并通过slot暴露该值，无需修改。

方案二：依赖注入（Provide/Inject，适合多层级嵌套场景） #

如果后续组件层级变多，逐层传props会很繁琐，可以用Vue的Provide/Inject特性跨层级传递值：

1. 修改Form.vue：提供文本值 #

<template>
  <div>
    <Card />
  </div>
</template>

<script setup>
import Card from './Card.vue'
import { provide } from 'vue'

// 提供文本值，支持固定值或从Form的props接收
provide('buttonText', '从Form跨层级传递的文本')

// 可选：如果需要Form接收外部传入的文本
// const props = defineProps({
//   formText: String
// })
// provide('buttonText', props.formText || '默认文本')
</script>

2. 修改Card.vue：无需传递props #

Card作为中间层，不需要再处理text传递，直接渲染Button即可：

<template>
  <Button>
    <template #default="buttonSlotProps">
      <button>{{ buttonSlotProps.text }}</button>
    </template>
  </Button>
</template>

<script setup>
import Button from './Button.vue'
</script>

3. 修改Button.vue：注入文本值 #

<template>
  <div>
    <slot v-bind="{ text }">
      <button>{{ text }}</button>
    </slot>
  </div>
</template>

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

// 注入Form提供的文本，可设置默认值
const text = inject('buttonText', '默认文本')

// 可选：保留props优先级，当Button自身有text props时优先使用
// const props = defineProps({
//   text: {
//     type: String,
//     default: () => inject('buttonText', '默认文本')
//   }
// })
</script>

原代码中的关键错误说明 #

• Card.vue中给Button传值时用了text="{ text }"，这是字符串字面量，不是绑定组件props，必须改为:text="text"才能传递props的实际值。
• Form.vue中定义了Card的slot，但Card的模板并没有将自身的text传递给该slot，若不需要自定义Card内容，可删除Form中Card的slot部分。

内容的提问来源于stack exchange，提问作者Bálint Háló