Vue中阻止checkBox事件冒泡

记录一个小note:

@click.stop.native="()=>{}"

<el-checkbox-group v-model="checkList">
   <div class="li" :class="item.checked ? 'active' : ''" v-for="(item,index) in scrollList" :key="item.title" @click="changeCheckbox(item,index)">
     <span class="name">
        <span class="text">{{item.title}}</span>
        <el-checkbox :label="index" @click.stop.native="()=>{}" @change="changeCheckbox(item,index)"></el-checkbox>
     </span>
     <span class="num">{{item.num}}</span>
     <span class="old">
         <span>较前一日</span>
         <span>{{item.yesterday}}</span>
     </span>
     <span class="old">
         <span>较上周同期</span>
         <span>{{item.lastWeek}}</span>
     </span>
   </div>
</el-checkbox-group>

• stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
• prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
• capture：与事件冒泡的方向相反，事件捕获由外到内
• self：只会触发自己范围内的事件，不包含子元素
• once：只会触发一次
• native: 可以理解为把一个vue组件转化为一个普通的HTML标签，在vue组件上绑定事件时使用