vue点击实现冒泡
Vue 中实现点击冒泡的方法
在 Vue 中，事件默认会冒泡，但有时可能需要手动控制冒泡行为。以下是几种实现点击冒泡的方式：
使用 .native 修饰符
对于原生 DOM 事件，可以直接使用 .native 修饰符监听原生事件，确保事件冒泡到父组件。
<template>
<div @click.native="handleParentClick">
<child-component></child-component>
</div>
</template>显式调用 $emit
在子组件中通过 $emit 触发事件，父组件监听该事件实现冒泡效果。
<!-- 子组件 -->
<template>
<div @click="handleClick">
<button>点击我</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('click');
}
}
}
</script>
<!-- 父组件 -->
<template>
<div @click="handleParentClick">
<child-component @click="handleChildClick"></child-component>
</div>
</template>使用事件修饰符
Vue 提供了 .stop 和 .prevent 等修饰符控制事件冒泡。若需允许冒泡，无需添加修饰符即可默认冒泡。
<template>
<div @click="handleParentClick">
<button @click="handleChildClick">点击我</button>
</div>
</template>手动触发父组件事件
在子组件中通过 $parent 或 $root 直接调用父组件的方法。
<!-- 子组件 -->
<template>
<div @click="handleClick">
<button>点击我</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$parent.handleParentClick();
}
}
}
</script>注意事项
- 默认情况下，Vue 事件会冒泡，无需额外处理。
- 若事件被
.stop修饰符阻止，需移除该修饰符或手动触发上层事件。 - 避免过度依赖
$parent或$root，优先使用$emit实现组件通信。
