element组件库-el-switch组件 .stop修饰符不生效问题(阻止不了事件冒泡)

代码

element组件库-el-switch组件 .stop修饰符不生效问题(阻止不了事件冒泡)_第1张图片

视图

element组件库-el-switch组件 .stop修饰符不生效问题(阻止不了事件冒泡)_第2张图片

问题所在

给外面大的div添加点击事件打开dialog,没问题,点击switch组件不希望打开dialog,但是现在点击switch组件也打开dialog了,肯定有问题,第一反应肯定是事件冒泡了,当触发了switch的事件,事件向外冒泡,又触发了父组件的事件。所以使用stop修饰符,组件事件冒泡即可。

  • 给change加.stop修饰符 阻止时间冒泡 不生效
  • 然后又换成click事件 还是不生效 其实el组件只提供了change事件 当时就想试试 还是不行
  • 然后我把switch换成按钮 给按钮加了.stop修饰符 看看点击按钮会不会打开dialog 结果是不会
  • 然后发现这个是el-switch组件不支持直接@事件.stop的写法

正确写法

在switch外层套一层div 在div上写 @click.stop 既可阻止时间冒泡
element组件库-el-switch组件 .stop修饰符不生效问题(阻止不了事件冒泡)_第3张图片

你可能感兴趣的:(vue,elementui,switch)