Javascript Vue有条件地防止事件传播到子级

这是

ColorButtonGroup

Vue组件（仅限模板）的示例，该组件用作复选框/切换按钮组，并限制选择的最大选项（在本例中为4种颜色）

它使用了

ToggleButton

组件，作为简单的切换选择，并应用样式，这是我们在项目中必须使用的常见组件之一

<template>  
  <div
    class="color-button-group"
    :class="[typeClass, variationClass]">
    <ToggleButton
      v-for="(item, index) in items"
      :key="index"
      :color="item.color"
      :type="type"
      @click.native="validateClick"
      @change="onChange(item.id)" />
  </div>
</template>

我已经通过方法和事件处理程序实现了所需的所有逻辑，一切正常，但也可以在达到最大选择后直观地切换按钮

当前行为：

期望的行为：

如何防止事件有条件地传播到子元素

stopPropagation

和

preventDefault

因为冒泡和默认操作预防没有帮助

---

选择最大颜色时，不应触发电平波纹管切换按钮（不允许使用禁用状态）

必须通过添加新的属性

toggleable

来修改底部

ToggleButton

组件，默认情况下该属性为true，上部

ColorButtonGroup

控制何时变为false

<template>  
  <div
    class="color-button-group"
    :class="[typeClass, variationClass]">
    <ToggleButton
      v-for="(item, index) in items"
      :key="index"
      :color="item.color"
      :type="type"
      :toggleable="isValidSelection()"
      @change="onChange(item.id)" />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: [],
      };
    },
    methods: {
      isValidSelection() {
        if (this.selected.length < this.maxSelect)
          return true;
        return false;
      },
      onChange(item) {
        if (this.isSelected(item)) {
          this.selected = this.selected.filter(val => val !== item);
        } else if (this.isValidSelection()) {
          this.selected.push(item);
        }
      },
    },
  };
</script>

导出默认值{
数据（）{
返回{
选定：[]，
};
},
方法：{
isValidSelection（）{
if（this.selected.lengthval！==item）；
}else if（this.isValidSelection（））{
此.已选.推送（项目）；
}
},
},
};

必须通过添加新的属性

toggleable

来修改底部

ToggleButton

组件，默认情况下该属性为true，上部

ColorButtonGroup

控制其何时变为false

<template>  
  <div
    class="color-button-group"
    :class="[typeClass, variationClass]">
    <ToggleButton
      v-for="(item, index) in items"
      :key="index"
      :color="item.color"
      :type="type"
      :toggleable="isValidSelection()"
      @change="onChange(item.id)" />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: [],
      };
    },
    methods: {
      isValidSelection() {
        if (this.selected.length < this.maxSelect)
          return true;
        return false;
      },
      onChange(item) {
        if (this.isSelected(item)) {
          this.selected = this.selected.filter(val => val !== item);
        } else if (this.isValidSelection()) {
          this.selected.push(item);
        }
      },
    },
  };
</script>

导出默认值{
数据（）{
返回{
选定：[]，
};
},
方法：{
isValidSelection（）{
if（this.selected.lengthval！==item）；
}else if（this.isValidSelection（））{
此.已选.推送（项目）；
}
},
},
};

每个切换按钮的

按下状态是否由组件控制？i、 e.是否在组件的
数据中设置？我会这么认为，因为您没有通过道具绑定按下的状态。是的，
ColorButtonGroup
保留所选值的列表，并且知道一切，但是如果不可能，它无法阻止孩子触发。每个切换按钮的按下状态是否由组件控制？i、 e.是否在组件的
数据中设置？我会这么认为，因为您没有通过道具绑定按下的
状态。是的，
ColorButtonGroup
保留所选值的列表，并且知道所有内容，但是如果不再可能，它无法阻止childs触发。