如何在Vue中将HTML属性与组件数据合并？

Question

我正在尝试将一些重复的代码提取到Vue组件中。我想使用HTML属性"class"将CSS类列表传递给组件，并将其与组件中定义的“默认类”合并。我希望此组件的公共接口类似于标准HTML元素，但是如果我尝试将“class”用作prop，则Vue会抛出有关使用JS关键字的错误。如果我尝试使用$attrs，则我的默认类会被清除。

是否可以合并HTML属性和本地组件数据，并在模板中使用结果？以下是我想要实现的内容：

<template>
  <img src="imageUrl" class="classes"
</template>

export default {
  computed: {
    imageUrl() { return 'urlString' },
  },
  classes() { return `${this.$attrs.class} default-class` }
}

我期望实现者能够像这样使用我的组件：

<CustomImageComponent class="class-name another-class" />

我期望这将被渲染为：

<img src="urlString" class="class-name another-class default-class" />

- mchandleraz

---

我不确定我是否完全理解这个问题，但在我看来，您正在寻找 class="my-static-class" :class="my-passed-classes"。它将静态和变量组合在类名中。 - Daniel

这正是我想要的，但我想使用HTML属性而不是自定义属性。 - mchandleraz

Answer 1

它已经自动发生了

使用<CustomImageComponent class="class-name another-class" />

将呈现<template><img src="imageUrl" class="my-default-class"/></template>

作为<img src="imageUrl" class="my-default-class class-name another-class"/>

(按照此顺序，模板中的类名在前，传递的类名在后)

问题是，如果您想要将其应用于嵌套的DOM元素，则无法这样做，您将不得不使用prop。

例如：

使用<CustomImageComponent class="class-name another-class" />

将呈现<template><div><img src="imageUrl" class="my-default-class"/></div></template>

作为<div class="class-name another-class"><img src="imageUrl" class="my-default-class"/></div>

除了使用自定义props之外，您无法做任何事情。

- Daniel

---

不知道为什么这对我不起作用...我一定是有语法错误或其他什么问题，但再试一次就可以了。谢谢！ - mchandleraz

Answer 2

你只需要在属性前使用v-bind:或者只用冒号(:)来传递数据作为值，Vue会自动合并类名，详情请见下方链接：

https://codesandbox.io/s/30oly1z326

- Alizadeh118

Answer 3

你可以使用this.$el.classList执行几件事情。

在mounted生命周期函数中：

mounted() {
    this.$el.classList.add('default-class');
}

计算属性：

computed: {
    classListWithDefault() { 
        return `${this.$el.classList.toString()} default-class`;
    }
}

- codeMonkey