Vue.js动态修改Prop：实现Alert组件类名内部拼接

解决方案 #

我来帮你搞定这个需求，其实很简单，分两步修改组件代码就能实现你想要的调用方式：

1. 重构Alert.vue组件，内部处理类名拼接 #

你之前尝试在created钩子中生成完整类名，但这个方法有个问题——如果父组件传入的type后续发生变化，created不会重新执行，类名也不会更新。更靠谱的方式是用计算属性，它会自动响应type的变化：

<template>
  <div :class="alertClass" role="alert">
    <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
    <span v-html="alerttext"></span>
    <loading v-show="loading" :loadingdata="loadingtext"></loading>
  </div>
</template>

<script>
export default {
  props: {
    // 现在这个type只接收danger/warning/success这类短标识
    type: {
      type: String,
      // 加个默认值，避免未传type时出现无效类名
      default: 'info'
    },
    alerttext: String,
    loading: Boolean,
    loadingtext: String
  },
  computed: {
    alertClass() {
      // 在这里统一拼接完整的CSS类名
      return `alert alert-${this.type} fade in alert-dismissible`;
    }
  }
}
</script>

2. 修改Upload.vue中的Alert调用方式 #

把原来传入的完整类名替换成短标识danger/success/warning即可：

<div v-for="(file, index) in files" :key="file.id">
  <span v-if="selectedfile">{{file.name}}</span>
  <!-- 传入danger标识 -->
  <alert :loading="false" loadingtext="" type="danger" :alerttext="errortypes[file.error]" v-if="file.error">{{file.error}}</alert>
  <!-- 传入success标识 -->
  <alert :loading="false" loadingtext="" type="success" :alerttext="alertfilesuccessuploaded" v-else-if="file.success"></alert>
  <!-- 传入warning标识 -->
  <alert :loading="false" loadingtext="" type="warning" :alerttext="loadingtext" v-else-if="file.active"></alert>
</div>

这样修改后，你就能按照期望的方式调用Alert组件了，而且后续如果需要调整基础类名（比如去掉fade in或者修改前缀），只需要在Alert组件的计算属性里改一次，不用逐个修改父组件的调用代码，维护起来更省心。

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