vue中阻止事件冒泡

vue阻止事件冒泡

问题描述：
使用的element-ui的dialog对话框，在对话框的父组件还有点击事件，点击dialog对话框时也会相应外部父组件的点击事件。

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  >
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

第一步修改

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  >
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click.stop="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click.stop="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

这一步能够达到，取消和确认按钮不响应父组件事件，但是这两个区域外的仍然会响应

第二步修改

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  @click.stop.native="dialogVisible = false"
  >
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click.stop="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click.stop="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

这一步能实现点击dialog的其他区域关闭dialog并且不会响应父组件事件。开始我直接写的stop没有加native，这样仍然会响应父组件的事件。

native的作用：
简单理解就是把子组件转换为普通HTML标签，不加native原生的事件无法触发。