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

【问题标题】：How can I merge HTML attributes with component data in Vue?如何在 Vue 中将 HTML 属性与组件数据合并？
【发布时间】：2019-05-14 22:46:57
【问题描述】：

我正在尝试将一些重复的代码提取到 Vue 组件中。我希望能够使用class HTML 属性将 CSS 类列表传递到组件中，并将它们与组件中定义的“默认类”合并。我希望这个组件的公共接口类似于标准的 HTML 元素，但是如果我尝试使用“类”作为道具，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" />

【问题讨论】：

我不确定我是否 100% 理解这个问题，但在我看来，您正在寻找 class="my-static-class" :class="my-passed-classes"。它结合了类名中的静态和变量
这就是我所追求的，但我想使用 HTML 属性而不是自定义属性。

标签： javascript vue.js

【解决方案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 元素要应用它，则问题 ID，你不能这样做，你必须使用一个道具

即：

使用<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>

除了使用自定义道具之外，您无能为力。

【讨论】：

不知道为什么这对我不起作用...我一定遇到了语法错误或其他问题，但再次尝试并成功了。谢谢！

【解决方案2】：

你只需要在属性前使用v-bind:或者colon(:)来传递数据作为一个值就可以了，Vue会自动合并类，见下面的链接：

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

【讨论】：

【解决方案3】：

您可以使用this.$el.classList 做一些事情。

在安装时：

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

计算属性：

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

【讨论】：