<template>
    <p>checkbox-group</p>
    <y-checkbox-group v-model="checkboxGroupOptions" @change="handleCheckboxChange">
      <y-checkbox
        v-for="(item, index) in checkboxGroupPem" 
        :key="index" 
        :label="item.id">
        {{item.name}}
      </y-checkbox>
    </y-checkbox-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkboxGroupOptions: ["1"],
      checkboxGroupPem: [
          id: "1",
          name: '杭州',
          id: "2",
          name: '上海',
          id: "3",
          name: '北京',
  methods: {
    handleCheckboxChange(data) {
      console.log('handleCheckboxChange', data);
  watch: {
    checkboxGroupOptions() {
      console.log('checkboxGroupOptions', this.checkboxGroupOptions)
</script>
可用于权限控制, checkboxGroupOptions绑定默认的权限, checkboxGroupPem菜单项所拥有的权限
checkboxGroupOptions多选框选中绑定的数组, checkboxGroupPem为渲染的多选框列表
checkbox-group
<template>
    <!-- checkbox-group 
        属性: v-model双向绑定值, 且为数组类型
        方法: change事件,双向绑定的值value发生变化后的回调
        如何将checkbox-group的值传递给checkbox子组件？-- 子组件通过向上追溯找到父组件checkbxo-group
        子组件checkbox值发生变化后, 如何通知父组件checkbox-group更新value值？
        class="y-checkbox-group"
        role="checkboxgroup">
        <slot></slot>
    </div>
</template>
<script>
export default {
    name: 'YCheckboxGroup',
    componentName: 'YCheckboxGroup',
    props: {
        value: {},
</script>
checkbox 组件修改
<script>
import Emitter from '../../../src/mixins/emitter';
export default {
    name: 'YCheckbox',
    props: {
        value: {},
        label: {},
        indeterminate: Boolean,
    mixins: [Emitter],
    computed: {
        isGroup() {
            let parent = this.$parent;
            while (parent) {
                if(parent.$options.componentName !== 'YCheckboxGroup') {
                    parent = parent.$parent;
                }else {
                    // 保留父组件checkbox-group的数据
                    this._checkboxGroup = parent;
                    console.log('_checkboxGroup', this._checkboxGroup);
                    return true;
            return false;
        model: {
            get() {
                // return this.value;
                return this.isGroup ? this._checkboxGroup.value : this.value;
            set(val) {
                // 为什么val会自动增删呢？由于父组件的value是数组类型, 则更新即删除和添加，如何做到的呢？
                if(this.isGroup) {
                    console.log('model发生了变化', val, this.label);
                    this.dispatch('YCheckboxGroup', 'input', [val]);
                }else {
                    this.$emit('input', val);
                this.$refs.checkbox && (this.$refs.checkbox.checked = this.isChecked);
        isChecked() {
            // 如果是第一种情况, 单独使用多选框且value值为布尔类型
            if({}.toString.call(this.model) === '[object Boolean]') { // 第一种情况
                console.log('hhhh', this.model);
                return this.model;
            else if(Array.isArray(this.model)) { // 第二种情况
                // console.log(this.model, this.label);
                // 判断值是否存在于数组中
                // indexOf和includes的区别
                return this.model.indexOf(this.label) > -1;
            // 第三种情况，父组件是checkbox-group, 则this.model为数组类型，从而转化为第二种情况
            // console.log('第三种情况，父组件是checkbox-group', this._checkboxGroup.value, this.label);
    methods: {
        // 父组件可能有change事件，即选中状态变化后的回调
        handleChange() {
            this.$nextTick(()=>{
                this.$emit('change', this.model, this._checkboxGroup);
                if(this.isGroup) {
                    // 组件checkbox-group绑定的change事件
                    this.dispatch('YCheckboxGroup', 'change', [this._checkboxGroup.value]);
</script>
这里主要修该了model值更改后的处理以及handleChange增加对checkbox-group绑定的cahnge事件的响应
增加父组件checkbox-group的判断, 以获取其value值（vm.$parent和vm.$options）
vm.$parent, 父实例，如果当前实例有的话
vm.$options, 用于当前 Vue 实例的初始化选项
vm.$parent, 获取当前实例的父实例
vm.$options, 获取当前实例的初始化数据
多选框组可用于权限控制, 但需要注意父节点的选中状态和子节点选中状态的响应
多选框组下，选中或取消选中某个多选框，model更新，且新值val为什么可以自动增删？(见下文补充)
v-model在checkbox中的作用是监听用户的输入事件以更新数据




    

<template>
        <p>inputValue: {{valueBool}}</p>
        <!-- 多选框-->
        <input type="checkbox" :value="inputValue" v-model="valueBool" />
        <p>inputValue: {{valueString}}</p>
        <!-- 多选框-->
        <input type="checkbox" :value="inputValue" v-model="valueString" />
        <p>inputValue: {{valueArray}}</p>
        <!-- 多选框-->
        <input type="checkbox" :value="inputValue" v-model="valueArray" />
    </div>
<template>
<script>
    export default {
        data() {
            inputValue: "2",
            valueBool: true,
            valueString: "string",
            valueArray: ["1", "2", "3"],
</script>
如果v-model绑定值是布尔值, 若为true, 则默认选中; 否则不选中
如果v-model绑定值是字符串, 若转为布尔为true, 则默认选中; 否则不选中
如果v-model绑定值是数组, 若该数组中含有inputValue值, 则默认选中; 否则不选中
多选框手动勾选
如果v-model绑定值是布尔值, 勾选则为true
如果v-model绑定值是字符串，勾选则为true
如果v-model绑定值是数组, 勾选则将该多选框对应的value插入到该数组
多选框手动取消勾选
如果v-model绑定值是布尔值, 取消勾选则为false
如果v-model绑定值是字符串，取消勾选则为false
如果v-model绑定值是数组, 取消勾选则将该多选框对应的value从该数组中删除
原生多选框实际上也是input输入框
若绑定值为字符串或布尔类型, 当取消勾选时输入框内容为空, 即多选框的checked为false; 勾选上,即多选框的checked为为true
若绑定值为数组, 取消勾选是将该值从数组中剔除; 勾选上是将该值push到数组
  
 
    
友情链接：
 

        我猪八戒搞坏了西游
        穿成虐文女主后抱紧男二大腿
        凰后天下：北皇陛下心尖宠
        太上感应篇
        太上感应篇图解全篇
        太上敕令,超汝孤魂,鬼魅一切,四生沾恩
        图像峰值信噪比python
        太上敕令小说
    露水晰123
      
 
 关注  
私信