Vue - 添加prop作为Bem修饰符

Question

我正在传递一种类型的＆＃39;支持我的组件用作BEM修饰符。

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

然而，当我尝试连接类时，我得到一个错误。我如何实现这一目标？

Answer 1

更简洁的方法是创建computed property：

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

然后将其绑定在HTML中：

<div :class="badgeClasses">

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

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