Vue3+TypeScript原子设计中Button组件文本不显示问题求助

问题根源很明确：你的Button原子组件定义的props是一个名为button的Object类型参数，但在HelloWorld.vue中使用时，直接传递了type、label等独立属性——这些属性并没有被包装到button对象里，导致组件内部button?.label取不到值；同时，未被组件props声明的属性会被Vue默认绑定到根元素上，这就是label变成button标签原生属性的原因。

下面提供两种可行的修复方案：

方案一：保持现有组件props结构，调整使用方式 #

如果想保留当前组件接收单个button对象的设计，只需要在使用时把所有属性包装进button对象即可：

<!-- HelloWorld.vue -->
<template>
  <Button :button="{ type: 'success', size: 'large', label: 'Primary Button' }" />
</template>

方案二：拆分props为独立属性（更符合Vue组件常规用法） #

这种方式更直观，也和你当前的调用方式匹配，只需要修改Button组件代码：

<!-- Button组件 -->
<template>
  <ElButton
    :type="type"
    :plain="plain"
    :rounded="rounded"
    :icon="icon"
    :disabled="disabled"
    :loading="loading"
    :size="size"
  >
    {{ label }}
  </ElButton>
</template>

<script lang="ts">
import { ElButton } from "element-plus"
import { defineComponent } from "vue"

export default defineComponent({
  name: "Button",
  props: {
    label: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: "primary"
    },
    plain: Boolean,
    rounded: Boolean,
    icon: String,
    disabled: Boolean,
    loading: Boolean,
    size: String
  },
  components: {
    ElButton,
  },
})
</script>

修改后你原来HelloWorld.vue中的调用代码可以直接正常使用，无需调整。

另外注意：TypeScript类型标注里应该用小写的string、boolean（原始类型），而非大写的String、Boolean（构造函数），这点已经在方案二的代码中修正。

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