Question

我正在尝试将一些重复的代码提取到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" />

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"/>

（按此顺序，首先是模板内类，然后是传递的类）

问题ID，如果您有一个要应用到其的嵌套 DOM元素，则不能这样做，则必须使用道具

即：

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

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

Answer 2

您只需要在属性之前使用v-bind:或仅使用colon(:)即可将数据作为值传递，就是这样，Vue自动合并类，请参见下面的链接：

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

Answer 3

使用this.$el.classList可以做几件事。

已安装：

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

计算属性：

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

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

3 个答案: