Vue中多层元素嵌套，事件由内向外触发，通常被称为“事件冒泡”。
事件冒泡是指，当一个元素上的事件被触发时，该事件会向该元素的父元素冒泡，直到到达顶层元素。例如，如果点击一个按钮，会触发按钮上的click事件，然后该事件会冒泡到按钮所在的div元素，再冒泡到body元素，最后冒泡到顶层元素document。
事件冒泡是Vue中默认的事件传播机制，可以通过在元素上绑定事件处理函数来监听事件。例如，下面的代码演示了如何在Vue组件中监听click事件：
<template>
<div>
<button @click="handleClick">Click me!</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Button clicked!')
}
}
}
</script>
当用户点击按钮时，会触发click事件，并执行handleClick函数。
如果您想阻止事件冒泡，可以在事件处理函数中调用$event.stopPropagation方法。例如，下面的代码演示了如何阻止click事件的冒泡：
<template>
<div>
<button @click="handleClick($event)">Click me!</button>
</div>
</template>
<script>
export default {
methods: {
handleClick(event) {
console.log('Button clicked!')
event.stopPropagation()
}