vue.js 在现有项目中寻找条件类绑定的解决方案

niwlg2el 于 2023-05-18 发布在 Vue.js

关注(0)|答案(1)|浏览(97)

我想扩展现有Vue项目中的一个子组件。我想给自定义类添加到子组件的可能性。通常我会把:class="customClasses"添加到dom-element中。但是在ChildCoponente中已经完成了一个条件类绑定。并且不允许有两个相同的属性（例如：<... :class="customClass" :class="{'bg-red': conditionA}" ...>）。所以我现在不知道怎么把两者都混合起来。
这是一个Vue 3项目，但相应的组件使用Vue Option API。

**问题：**如何将customClass prop绑定到锚标签上？

<template>
    <a :href="linkTo" class="dropdown-item" :class="{'bg-red': conditionA}" :tabindex="disabled ? '-1' : undefined" @click="click">
        <slot></slot>
    </a>
</template>

<script>
    export default {
        name: "DropdownItem",

        props: {
            linTo: {
                default: '#'
            },
            conditionA: {
                default: false,
            },

            customClass: {
                default: null
            }
        }
    }
</script>

vue.js

来源：https://stackoverflow.com/questions/76200815/looking-for-a-solution-for-a-conditional-class-binding-in-the-existing-project

1条答案

按热度按时间

cedebl8k1#

**简单方法：（推荐）**可以使用父组件中ChildElement的class属性。

// PARENT
<template>
  <div>
    <child-component class="your customm classes which you want pass" />
  </div>
</template>

而你的孩子，也会因为你的魔法，而变得更有魅力。

**长路：**可以传递一个对象数组，而不是一个对象。:class="[customClass, {'some-class': comeConidtion}]" .

<template>
    <a :href="linkTo" class="dropdown-item" :class="[{'bg-red': conditionA}, customClass]" :tabindex="disabled ? '-1' : undefined" @click="click">
        <slot></slot>
    </a>
</template>

赞(0）回复(0）举报 2023-05-18

我来回答

vue.js 在现有项目中寻找条件类绑定的解决方案

1条答案

相关问题

热门标签

最新问答