Vue中如何将prop作为BEM修饰符实现类名拼接？

你遇到的问题是因为在Vue模板里直接用Mustache语法（{{}}）拼接类名的方式不符合Vue的模板规则，下面给你几种简单可行的实现方案：

方式一：数组语法动态绑定类名 #

这是最直接的写法，把固定类名和动态修饰符类名放在数组里即可：

<div :class="['badge', `badge--${$props.type}`]">

这里用ES6模板字符串拼接修饰符类名，Vue会自动将数组里的类名合并成最终的class属性，完全符合BEM命名规范。

方式二：对象语法（带存在性判断） #

如果想避免type为空时出现badge--这种无效类名，可以用对象语法做个简单判断：

<div :class="{
  'badge': true,
  [`badge--${$props.type}`]: $props.type
}">

只有当type存在且不为空字符串时，对应的修饰符类名才会被添加，更严谨。

方式三：计算属性（推荐复杂场景） #

如果组件的类名逻辑需要复用或者后续有扩展需求，用计算属性会让代码更清晰：

<template>
  <div :class="badgeClasses">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'default' // 设置默认值，保证总有合法的修饰符
    }
  },
  computed: {
    badgeClasses() {
      return ['badge', `badge--${this.type}`]
      // 也可以用对象写法做判断：
      // return {
      //   'badge': true,
      //   [`badge--${this.type}`]: !!this.type
      // }
    }
  }
}
</script>

为什么原来的写法会报错？ #

在Vue模板里，{{}}是用来插值文本内容的，不能直接在HTML属性中这样拼接变量。直接写class="badge badge--{{this.$props.type}}"会被当成普通字符串处理，不会解析$props.type的值，自然就会出现类名错误或者语法问题。

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