vue点击实现冒泡
Vue 中点击事件的冒泡机制
在 Vue 中，事件默认会遵循 DOM 的冒泡机制。当点击子元素时，事件会从子元素向上冒泡到父元素。以下是实现冒泡和控制冒泡的方法：
默认冒泡行为
Vue 的事件绑定（如 @click）默认允许事件冒泡。例如：
<div @click="parentClick">
<button @click="childClick">点击我</button>
</div>点击按钮时，会依次触发 childClick 和 parentClick。
阻止事件冒泡
如果需要阻止事件冒泡，可以使用 .stop 修饰符：
<div @click="parentClick">
<button @click.stop="childClick">点击我</button>
</div>此时点击按钮只会触发 childClick，不会触发 parentClick。
事件捕获阶段
Vue 也支持在捕获阶段触发事件，使用 .capture 修饰符：
<div @click.capture="parentClick">
<button @click="childClick">点击我</button>
</div>事件会先在父元素触发，再到子元素触发。
事件修饰符总结
.stop：阻止事件冒泡。.prevent：阻止默认行为（如表单提交）。.capture：使用捕获模式。.self：只在事件目标自身触发时调用。.once：事件只触发一次。
自定义事件冒泡
对于自定义事件，可以通过 $emit 手动实现冒泡：
// 子组件
this.$emit('custom-event', data)
// 父组件
<child-component @custom-event="handleCustomEvent"></child-component>如果需要阻止自定义事件冒泡，可以在子组件中调用 event.stopPropagation()。
注意事项
- 原生 DOM 事件和 Vue 自定义事件的冒泡机制不同。
- 过度使用事件冒泡可能导致代码难以维护，建议谨慎设计事件流。
- 在复杂组件结构中，可以考虑使用全局事件总线或 Vuex 代替多层事件传递。
