Javascript 当另一个实例设置为true时，如何将组件的一个复选框实例设置为false？

如何在vue.js中创建复选框组件，比如（HTML表示）：

因此，当我创建两个这样的复选框时，如果第一个复选框设置为true，我想将另一个复选框更改为false，反之亦然。同时，它们也可能是错误的

（我是vue.js的新手，我只想在现有环境中添加它）

存在的代码

    Vue.component('v-switch', {
    props: ['value', 'disabled', 'color'],
    template: `
        <div class="switch">
            <label>
                <input type="checkbox" :disabled="disabled" @change="emitChange()" v-model="data">
                <span class="lever" :class="color_class"></span>
            </label>
        </div>`,
    data: function () {
        return {
            data: this.value || '',
            color_class: 'switch-col-' + (this.color || 'green')
        };
    },
    methods: {
        emitChange: function () {
            var vm = this;
            setTimeout(function () {
                vm.$emit('change', vm.data);
            });
        }
    },
    watch: {
        data: function () {
            this.$emit('input', this.data);
        },
        value: function () {
            this.data = this.value;
        }
    },
    mounted: function () {
        //this.data = this.value;
    }
});

Vue.component（'v-switch'{
道具：['value'，'disabled'，'color']，
模板：`
`,
数据：函数（）{
返回{
数据：this.value | |“”，
color|U类：“切换列-”+（this.color | |“绿色”）
};
},
方法：{
emitChange:函数（）{
var vm=这个；
setTimeout（函数（）{
vm.$emit（'change'，vm.data）；
});
}
},
观察：{
数据：函数（）{
此.emit（'input'，this.data）；
},
值：函数（）{
this.data=this.value；
}
},
挂载：函数（）{
//this.data=this.value；
}
});

以及HTML：

 <v-input-wrap translate="newsletter" class="col-sm-1 col-12">
 <v-switch v-model="contact_persons[index].newsletter"></v-switch>
 </v-input-wrap>
<v-input-wrap translate="blacklist" class="col-sm-1 col-12">
 <v-switch v-model="contact_persons[index].blacklist"></v-switch>
 </v-input-wrap>

---

您应该接收子组件发出的值，并将

@change

事件的方法处理程序添加到每个组件，当您检查一个组件时，另一个组件将被取消选中，最初它们将被取消选中

Vue.component（'v-switch'{
道具：['value'，'disabled'，'color']，
模板：`
{{value}}
`,
数据：函数（）{
返回{
数据：this.value | | false，
color|U类：“切换列-”+（this.color | |“绿色”）
};
},
方法：{
emitChange:function（）{
var vm=这个；
console.log（this.data）
vm.$emit（'change'，vm.data）；
}
},
观察：{
数据：函数（）{
此.emit（'input'，this.data）；
},
值：函数（）{
this.data=this.value；
}
},
挂载：函数（）{
//this.data=this.value；
}
});
//忽略以下两行，它们只是禁用“运行代码段”中的警告
Vue.config.devtools=false；
Vue.config.productionTip=false；
新Vue({
el:“#应用程序”，
数据（）{
返回{
ch1：错，
ch2：错误
}
},
方法：{
更改1（v）{
这1.ch1=v；
this.ch1？this.ch2=！this.ch1:this.ch2；
},
更改2（v）{
这是ch2=v；
this.ch2？this.ch1=！this.ch2:this.ch1；
}
}
});
。将颜色切换为绿色{
颜色：绿色；
}
.开关颜色为红色{
颜色：红色；
}
选项1。它是一个组件，但最终将成为一个复选框。在改变时，我会寻找它的兄弟姐妹。2.全局/状态跟踪每个复选框
 <v-input-wrap translate="newsletter" class="col-sm-1 col-12">
 <v-switch v-model="contact_persons[index].newsletter"></v-switch>
 </v-input-wrap>
<v-input-wrap translate="blacklist" class="col-sm-1 col-12">
 <v-switch v-model="contact_persons[index].blacklist"></v-switch>
 </v-input-wrap>