Vue.js 中，@click 和 @click.stop的区别
在 Vue.js 中，@click 和 @click.stop 的区别主要在于事件传播的行为。
@click
使用 @click 时，当你点击元素时，事件会被触发，并且会按照正常的事件传播流程进行。即，如果该元素内部还有其他元素，它们的点击事件也会被触发。
@click.stop
使用 @click.stop 时，会在触发点击事件的同时调用 event.stopPropagation()，这会阻止事件向上冒泡到父元素。因此，父元素的点击事件处理程序不会被触发。
<div @click="parentMethod">
<button @click.stop="childMethod">Click Me</button>
</div>在这个例子中，点击按钮只会触发 childMethod，而不会触发 parentMethod。而如果只使用 @click，那么点击按钮将会同时触发 parentMethod 和 childMethod。
总结
@click：触发事件并允许事件冒泡。@click.stop：触发事件并阻止事件冒泡。
遇到的问题
父元素@click是返回到上一页，子元素@click是跳转到另一个页面，点击子元素直接跳转到另一个页面又跳转回来了，子元素改为@click.stop好了
延伸
事件冒泡是指在 DOM 中，事件从最具体的元素（事件的目标）开始向外传播到更不具体的元素（父元素），直到文档的根节点。这是浏览器处理事件的一种默认机制。
事件冒泡的过程
- 目标阶段：事件首先被触发在目标元素上。
- 冒泡阶段：事件从目标元素开始，逐层向上传播到其父元素，直到到达
document对象。
示例
假设有以下 HTML 结构：
<div id="parent" @click="parentMethod"> <button id="child" @click="childMethod">Click Me</button> </div>JavaScript 事件处理
methods: {
parentMethod() {
console.log('Parent clicked');
},
childMethod() {
console.log('Child clicked');
}
}点击按钮的结果
- 点击按钮会触发
childMethod，然后因为事件冒泡，接着会触发parentMethod。 - 输出将是：
Child clicked Parent clicked
阻止事件冒泡
如果想阻止事件继续向上传播，可以在事件处理函数中调用 event.stopPropagation()，或者使用 Vue 的修饰符 @click.stop。
<button @click.stop="childMethod">Click Me</button>
在这种情况下，点击按钮只会触发 childMethod，不会触发 parentMethod。
总结
事件冒泡是一个重要的概念，有助于管理复杂的事件处理逻辑。理解事件冒泡可以帮助你更好地控制事件在组件之间的传播，确保应用的行为符合预期。