怎么阻止checkbox组件及其他没有click事件的组件冒泡事件。

Question

修改了一下提问
外面是个<div> 有个下拉展示的方法，不希望点击checkbox选框的时候触发下拉事件

<div @click="showCollapse = !showCollapse">//下拉事件
  <b-form-checkbox-group
    :id="id"
    v-model="data.selected"
    :options="options"
    name="options"
    class="ml-4"
    aria-label="Individual options"
  ></b-form-checkbox-group>//checkbox组件
</div>  

这是个bootstrap的checkbox，我想点击它同时阻止触发它外面的点击事件。
我知道有下面这个可以阻止事件冒泡，但是它需要点击事件方法名。

        @click.stop.prevent = "methods()" //组件中并没有methods()方法名    

所以怎么阻止没有click事件的组件冒泡事件，或者获取checkbox点击事件的方法名。

---

采纳的答案是

      <b-form-checkbox-group
        @click.native.stop//加上这个就好了
        :id="id"
        v-model="data.selected"
        :options="options"
        name="options"
        class="ml-4"
        aria-label="Individual options"
      ></b-form-checkbox-group>//checkbox组件

Answer 1

<b-form-checkbox-group
    @click.stop   
    :id="id"
    v-model="data.selected"
    :options="options"
    name="options"
    class="ml-4"
    aria-label="Individual options"
  ></b-form-checkbox-group>

直接组织不行吗..

Answer 2

<b-form-checkbox
      v-model="allSelected"
      :indeterminate="indeterminate"
      aria-describedby="flavours"
      aria-controls="flavours"
      @change="toggleAll($event)">
      {{ allSelected ? 'Un-select All' : 'Select All' }}
</b-form-checkbox>

toggleAll(e) {
  e.stopPropagation()
}