Vue - 添加道具作为 Bem 修改器

Question

我正在向我的组件传递一个 'type' 属性以用作 BEM 修饰符。

 <div class="badge badge--{{this.$props.type}}">

然而，当我尝试连接 class 时，出现错误。我该如何实现？

Answer 1

更简洁的方法是创建一个 computed property :

computed: {
  badgeClasses() {
    return `badge badge--${this.type}`;  
  },
},

然后绑定到你的HTML :

<div :class="badgeClasses">

但是您也可以像您尝试的那样只绑定属性，但使用反引号而不是简单的引号：

<div class="`badge badge--${type}`">

Vue - adding prop as a Bem modifier