如何在vue-form-wizard的tab-content显示短字符串，组件传完整Prop

你需要让tab-content显示国家缩写，同时给内部组件传递国家全称，只需两步调整：

• 给countries数组新增缩写字段（比如abbreviation）
• 让tab-content的title绑定缩写，内部组件的title仍绑定全称

修改后的完整代码如下：

<template>
  <form-wizard>
    <tab-content
      v-for="country in countries"
      :key="country.id"
      :title="country.abbreviation"
    >
      <component
        :is="country.name"
        :title="country.title"
      />
    </tab-content>
  </form-wizard>
</template>

<script>
export default {
  data() {
    return {
      countries: [
        {
          id: 0,
          title: 'United States',
          abbreviation: 'USA',
          name: 'UnitedStates',
        },
        {
          id: 1,
          title: 'United Kingdom',
          abbreviation: 'UK',
          name: 'UnitedKingdom',
        },
        {
          id: 2,
          title: 'United Arab Emirates',
          abbreviation: 'UAE',
          name: 'UnitedArabEmirates',
        },
      ],
    }
  },
}
</script>

调整后，tab-content会显示对应的国家缩写（USA、UK、UAE），内部组件依然能接收到完整的国家名称作为title属性。

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