Vue3+TypeScript：如何构建可复用组件数组传入其他组件？

问题说明 #

我已经创建了可复用的ActionButton组件，支持动态设置样式，也能传入文本、图标等参数。作为Vue3新手，我想构建该组件的参数数组并传递给其他可复用组件（比如image-card），但不清楚如何正确配置所需参数。以下是我的组件代码和当前尝试的实现：

ActionButton组件代码 #

<template>
    <button class="pr-5 mr-3" :class="buttonStyle">
        <span class="inline-block px-2">
            <svg class="inline-block"  :class="svgStyle" xmlns="http://www.w3.org/2000/svg"  :viewBox="svgViewBox" :fill="svgFill">
                <path :d="svgValue"/>
            </svg>
            <span class="inline-block ml-4" :class="textStyle">{{ inlineText }}</span>
        </span>
    </button>
</template>
  
<script lang="ts" >
import { defineComponent, computed } from "@vue/runtime-core";

export default defineComponent({
    name: "ActionButton",
    props: {
        title: {
            required: false,
            type: String,
            default: "Title",
        },
        inlineText: {
            required: false,
            type: String,
            default: "Button",
        },
        inlineTextSize: {
            required: false,
            type: String,
            default: "text-xs"
        },
        inlineTextColor: {
            required: false,
            type: String,
            default: "text-white"
        },
        inlineFont: {
            required: false,
            type: String,
            default: "font-bold"
        },
        buttonCorners: {
            required: false,
            type: String,
            default: "rounded"
        },
        buttonHeight: {
            required: false,
            type: String,
            default: "h-6"
        },
        buttonWidth: {
            required: false,
            type: String,
            default: "w-auto"
        },
        buttonBgColor: {
            required: false,
            type: String,
            default: "bg-[#57cbc4]"
        },
        buttonHoverColor: {
            required:false,
            type: String,
            default: "hover:bg-blue-700"
        },
        svgValue: {
            required: false,
            type: String,
            default: "M13.05 42q-1.25 0-2.125-.875T10.05 39V10.5H8v-3h9.4V6h13.2v1.5H40v3h-2.05V39q0 1.2-.9 2.1-.9.9-2.1.9Zm21.9-31.5h-21.9V39h21.9Zm-16.6 24.2h3V14.75h-3Zm8.3 0h3V14.75h-3Zm-13.6-24.2V39Z"
        },
        svgHeight: {
            required: false,
            type: String,
            default: "h-5"
        },
        svgWidth: {
            required: false,
            type: String,
            default: "w-5"
        },
        svgFill: {
            required: false,
            type: String,
            default: "white"
        },
        svgViewBox: {
            required: false,
            type: String,
            default: "0 0 48 48"
        }
    },
    setup(props) {
        const buttonStyle = props.buttonCorners + " " + props.buttonHeight  + " " 
                + props.buttonWidth + " " + props.buttonBgColor + " " + props.buttonHoverColor;

        const svgStyle = props.svgHeight + " " + props.svgWidth;

        const textStyle = props.inlineTextSize + " " + props.inlineTextColor + " " + props.inlineFont;

        return {
            buttonStyle,
            svgStyle,
            textStyle
        }
    }
});
</script>

当前尝试的数组构建代码 #

<image-card
         :client-projects="clientProjects"
         image-state="true"
         :action-buttons="cardActionButtons"
        />

const cardActionButtons = ref(
    [
       {
          title: "Edit Button",
          inlineText: "EDIT",
          inlineTextSize: "",
          inlineTextColor: "",
          inlineFont: "",
          buttonCorners: "",
          buttonHeight: "",
          buttonWidth: "",
          buttonBgColor: "",
          buttonHoverColor: "",
          svgValue: "M9 39h2.2l22.15-22.15-2.2-2.2L9 36.8Zm30.7-24.3-6.4-6.4 2.1-2.1q.85-.85 2.1-.85t2.1.85l2.2 2.2q.85.85.85 2.1t-.85 2.1Zm-2.1 2.1L12.4 42H6v-6.4l25.2-25.2Zm-5.35-1.05-1.1-1.1 2.2 2.2Z",
          svgHeight: "",
          svgWidth: "",
          svgFill: "",
          svgViewBox: ""
      },
    ]
  )

解决方案 #

1. 优化参数数组配置 #

你当前给很多属性传了空字符串，这会覆盖组件的默认值，导致样式失效。只需要传入你需要自定义的属性即可，不需要修改的默认属性可以完全省略：

const cardActionButtons = ref([
  {
    title: "Edit Button",
    inlineText: "EDIT",
    svgValue: "M9 39h2.2l22.15-22.15-2.2-2.2L9 36.8Zm30.7-24.3-6.4-6.4 2.1-2.1q.85-.85 2.1-.85t2.1.85l2.2 2.2q.85.85.85 2.1t-.85 2.1Zm-2.1 2.1L12.4 42H6v-6.4l25.2-25.2Zm-5.35-1.05-1.1-1.1 2.2 2.2Z"
    // 其他保持默认的属性不用写
  },
  // 可以添加更多按钮配置
  {
    inlineText: "DELETE",
    buttonBgColor: "bg-red-500",
    buttonHoverColor: "hover:bg-red-700",
    svgFill: "white"
  }
])

2. 在image-card组件中正确渲染ActionButton #

在image-card组件内部，你需要接收action-buttons props，然后用v-for循环渲染每个ActionButton，并把对应的参数传递过去：

<template>
  <!-- 其他image-card内容 -->
  <div class="action-buttons-container">
    <ActionButton 
      v-for="(btn, index) in actionButtons" 
      :key="index"
      v-bind="btn"  <!-- 用v-bind一次性绑定所有属性 -->
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/runtime-core';
import ActionButton from './ActionButton.vue';

export default defineComponent({
  name: 'ImageCard',
  components: {
    ActionButton
  },
  props: {
    // 其他props...
    actionButtons: {
      type: Array,
      required: true,
      // 可选：添加类型验证确保数组结构合规
      validator: (value: any[]) => {
        return value.every(item => typeof item === 'object');
      }
    }
  }
});
</script>

3. 可选：优化ActionButton的样式拼接 #

当前用字符串拼接生成样式类容易出现多余空格，改用数组结合computed优化，更清晰且避免空格问题：

setup(props) {
  const buttonStyle = computed(() => [
    props.buttonCorners,
    props.buttonHeight,
    props.buttonWidth,
    props.buttonBgColor,
    props.buttonHoverColor
  ]);

  const svgStyle = computed(() => [
    props.svgHeight,
    props.svgWidth
  ]);

  const textStyle = computed(() => [
    props.inlineTextSize,
    props.inlineTextColor,
    props.inlineFont
  ]);

  return {
    buttonStyle,
    svgStyle,
    textStyle
  }
}

然后在模板里直接绑定数组即可，Vue会自动处理空格：

<button class="pr-5 mr-3" :class="buttonStyle">
<!-- ... -->

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