Properties Vue-添加道具作为边界元修改器

我正在将“类型”道具传递给我的组件，以用作边界元法修饰符

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

---

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

一种更简洁的方法是创建一个

计算属性

：

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

然后将其绑定到HTML中：

<div :class="badgeClasses">

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

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

---

一种更简洁的方法是创建一个

计算属性

：

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

然后将其绑定到HTML中：

<div :class="badgeClasses">

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

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

谢谢，computed是默认选择，但认为可能有一种直接连接的快速方法。另一种方法非常难看，因此将进行计算。另外请注意，您不需要在HTML中使用

this.$props

，因为数据、计算属性和props已经在当前上下文中。谢谢，计算是默认选择，但可能有一种直接连接的快速方法。另一种方法非常难看，因此将进行计算。另外请注意，您不需要在HTML中使用

this.$props

，因为数据、计算属性和props已经在当前上下文中。