vue中父子组件中冒泡事件，使用.stop不能解决的问题

vue中父子组件中事件冒泡问题

1. 父组件中有个点击事件 showTaskItemDetail

<div class="task-item" v-for="(task,index) in taskModel.taskList" :key="index" @click="showTaskItemDetail()">
  <div class="task-top"  @click.stop>
    <task-top-detail :tagIds="tags" :task="task"/>
  </div>
  <div class="task-message ellipsis3" >
    <span>{{task.taskName}}</span>
  </div>
  <div class="task-bottom"  @click.stop>
    <task-bottom-detail :task="task"/>
  </div>
</div>

 

2.组件 task-top-detail 中el-dropdown-item有一个点击事件

<div class="task-top-detail">
  <div class="inline-block task-tag-content">
    <span v-for="(tag,index) in tempTags" :key="index" :style="'background: ' + tag.color">{{tag.name}}</span>
  </div>
  <div class="inline-block task-menu right">
    <el-dropdown trigger="click">
      <span><i class="el-icon-more"></i></span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item ><span>开始任务</span></el-dropdown-item>
        <el-dropdown-item>结束任务</el-dropdown-item>
        <el-dropdown-item @click.native="taskVisible=true"><span>编辑</span></el-dropdown-item>
        <el-dropdown-item>删除</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>

子组件中使用@click.stop 也不能阻止冒泡事件

此时为子组件的容器加上阻止冒泡事件 在子组件调用的地方，即可

<div class="task-top" @click.stop>

    <task-top-detail :tagIds="tags" :task="task"/>

</div>