Vue.js 3 SFC Prop传递错误导致按钮内容为空的问题排查

问题原因 #

核心是组件传值方式不匹配：

• 你在ActionButton.vue里通过defineProps声明了actionButtonOne Prop来接收文本，但父组件CardElement.vue用的是**插槽（Slot）**写法（<ActionButton>Remove</ActionButton>）传值。组件内部既没读取插槽内容，也没正确接收Prop的传值，导致按钮文本空白。

修复方案 #

方案1：保持使用Prop传值 #

修改父组件调用方式，通过Prop属性传值：

<!-- CardElement.vue -->
<ActionButton actionButtonOne="Remove" />

同时确保ActionButton.vue模板正确绑定Prop：

<!-- ActionButton.vue -->
<script setup>
const props = defineProps({
  actionButtonOne: {
    type: String,
    required: true // 可根据需求设置是否必填
  }
})
</script>

<template>
  <button>{{ actionButtonOne }}</button>
</template>

方案2：改用插槽接收内容（适合富文本/多节点场景） #

如果偏好<ActionButton>Remove</ActionButton>的写法，无需声明Prop，直接在组件内部使用默认插槽：

<!-- ActionButton.vue -->
<script setup>
// 无需定义actionButtonOne Prop
</script>

<template>
  <button><slot></slot></button>
</template>

父组件调用方式保持不变即可。

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