Javascript 如何在全局单击事件中切换选定的类？

我正在vue中创建我的组件库，我定义了我的组件复选框，代码如下：

<template>
    <div class="checkboxcont" :class="{'checkboxcont-selected': isSelected}" @click="clickevent">
        <span class="j-checkbox">
            <input type="checkbox" />
        </span>
        <slot></slot>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                isSelected: false
            }
        },
        methods: {
            clickevent(event) {
                if(this.isSelected) {
                    this.isSelected = false;
                } else {
                    this.isSelected = true;
                }
            }
        },
    }
</script>

请问我该怎么解决这个问题

以下是我的风格代码，使用较少：

<style lang="less" scoped rel="stylesheet/less">
    @import '../../mixin/mixin.less';
    .checkboxcont {
        display: inline-block;
        &:hover {
            cursor: pointer;
            .j-checkbox {
                border-color: @jbluelight;
            }
        }
    }
    .j-checkbox {
        position: relative;
        top: 0;
        left: 0;
        width: 12px;
        height: 12px;
        display: inline-block;
        border: 1px solid @border;
        border-radius: 3px;
        line-height: 12px;
        vertical-align: -3px;
        margin: 0 5px;
        z-index: 20;
        transition: all .2s linear;
        input {
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            visibility: hidden;
            /*display: none;*/
        }
    }
    .checkboxcont-selected {
        .j-checkbox {
            background: @jbluelight;
            border-color: @jbluelight;
            &:after {
                content: '';
                width: 4px;
                height: 7px;
                border: 2px solid white;
                border-top: none;
                border-left: none;
                position: absolute;
                left: 3px;
                top: 0;
                z-index: 30;
                transform: rotate(45deg) scale(1);
            }
        }
    }
</style>
<style lang="less" rel="stylesheet/less">
    @import '../../mixin/mixin.less';
    .checkboxcont-selected-last .j-checkbox {
        border-color: @jbluelight;
    }
</style>

我在分派click事件时使用本机HTML DOM操作删除了该类，因为我无法访问其他组件，因此clickevent的完整定义如下：

clickevent(event) {
    let selectedLast = document.querySelector(".checkboxcont-selected-last");
    if(selectedLast) {
        selectedLast.classList.remove("checkboxcont-selected-last")
    }
    if(this.isSelected) {
        this.isSelected = false;
        this.$el.classList.add("checkboxcont-selected-last")
    } else {
        this.isSelected = true;
    }
}

---

它看起来不错，但是当我使用v-bind绑定组件的类名时，我不能添加组件的类名，这是错误的吗？当我用Vue绑定组件的类名时，是否无法使用本机HTML DOM操作？

动态添加或删除类的更好方法是使用。有多种方法可以基于变量添加动态类

我看到您已经在使用它：

<div class="checkboxcont" :class="{'checkboxcont-selected': isSelected}" @click="clickevent">

因此，这里这个div只有一个类：

checkboxcont

如果

isSelected

为false，还有两个类：

checkboxcont和checkboxcontselected

如果

isSelected

为true

编辑： 考虑到您想在另一个组件上向DOM添加一个类，我可以想出两种方法：

使用Web API：如果知道要使用添加类的元素的id，可以执行以下操作：

var d=document.getElementById（“yourElem”）
d、 className+=“其他类”

Vuex方式：您可以使用由提供的集中状态或用于管理状态，这些状态变量可以跨组件更改，并可用于动态添加/删除类

您可以查看我的这篇文章，以了解有关vuex的更多信息

---

我想说的是，VUE有很多组件库，这真的足够了，只是考虑参与其中的一些，而不是创建新的。你能试着阐述吗？我试图理解你想要实现什么，但我就是做不到。如果你能创建一个fiddle来处理这个问题，这会很有帮助，这样会更容易帮助你。你已经在使用HTML类的动态绑定，我在发布答案后注意到了这一点，那么为什么你需要本机JavaScript代码来添加DOM中的类呢？是的，我现在可以动态绑定HTML类，但它在一个组件中很有用（我只能这样做），我该如何单击此组件并删除另一个组件的类，请？也许我没有明确表达我的想法，我可以通过绑定clickEvent动态添加我的类，但它在一个组件中很有用，当我单击一个复选框（组件1）并删除另一个复选框（组件2）的类时，我该如何做？当我取消单击组件时，我想让它的边框变亮，但当我单击其他复选框时，它的边框不应变亮，因此我为它提供了一个临时类，我使用更少的代码添加了我的样式代码，您可以看到。您给出的第一种方法是，我在问题的最后尝试使用它，但它似乎没有起到任何作用，我是否错误地使用了它。$el来更改我当我使用Vuex时，我想问的第二个问题是，我必须让用户编写Vue.use（Vuex），我提到我想创建一个组件库，所以这是使用Vuex的好方法吗？@Jorten我认为你不能使用它访问其他组件的元素。$el，除了你使用的语法似乎也错了。是的，Vuex是vue社区在不同组件之间共享数据的标准方法，有一个好的，听我的回答。我理解你的意思。现在我有两个问题，第一个是我试图在其他组件中更改类名，我会将它添加到我的问题中，请看。第二个是，当我使用vuex时，我必须声明：

Vue.use（vuex）当人们使用我的组件时，他们将导入它：
从“ChanotUI”导入复选框
它是自动使用vuex吗？还是他们应该自己再次声明
“Vue.use（vuex）”
？
clickevent(event) {
    let selectedLast = document.querySelector(".checkboxcont-selected-last");
    if(selectedLast) {
        selectedLast.classList.remove("checkboxcont-selected-last")
    }
    if(this.isSelected) {
        this.isSelected = false;
        this.$el.classList.add("checkboxcont-selected-last")
    } else {
        this.isSelected = true;
    }
}

<div class="checkboxcont" :class="{'checkboxcont-selected': isSelected}" @click="clickevent">