vue阻止子元素触发父元素的事件，事件冒泡处理

1、起因

需求要求图片列表可选，并且点击该区域弹出图片详情，但是复选框又有自己的事件，所以需要点击复选框的时候不触发父元素的事件。

2、实现代码

原代码

<div class="tim" id="tim" v-for="(fileName, index) in nowPhotoArr" :key="fileName" @click.stop="openPhotoDetails(fileName, index)">
    <el-checkbox :label="fileName"></el-checkbox>
  	<img class="img" :src="playPath + fileName">
  	<p class="name">{{fileName}}</p>
</div>

在需要阻止事件冒泡的元素上加上 v-on:click.stop=“stopMaopao”

<el-checkbox :label="fileName" v-on:click.stop="stopMaopao"></el-checkbox>

不设置事件也可以

<el-checkbox :label="fileName" @click.stop=""></el-checkbox>

3、部分特殊情况的处理方式

但是对于有些组件，绑定在他们上面是无效的，需要在外卖再套一层，将事件绑定到父元素上，比如elementui的checkbox。

      <el-checkbox-group v-model="checkedList" @change="handleCheckedphotoListChange">
        <div class="tim" id="tim" v-for="(fileName, index) in nowPhotoArr" :key="fileName" @click.stop="openPhotoDetails(fileName, index)">
          <div class="checkbox"  v-on:click.stop="">
            <el-checkbox :label="fileName"></el-checkbox>
          </div>
          <img class="img" :src="playPath + fileName">
          <p class="name">{{fileName}}</p>
        </div>
      </el-checkbox-group>