Vue.js 中，@click 和 @click.stop的区别

在 Vue.js 中，@click 和 @click.stop 的区别主要在于事件传播的行为。

使用 @click 时，当你点击元素时，事件会被触发，并且会按照正常的事件传播流程进行。即，如果该元素内部还有其他元素，它们的点击事件也会被触发。

使用 @click.stop 时，会在触发点击事件的同时调用 event.stopPropagation()，这会阻止事件向上冒泡到父元素。因此，父元素的点击事件处理程序不会被触发。

html 复制代码

<div @click="parentMethod">
  <button @click.stop="childMethod">Click Me</button>
</div>

在这个例子中，点击按钮只会触发 childMethod，而不会触发 parentMethod。而如果只使用 @click，那么点击按钮将会同时触发 parentMethod 和 childMethod。

遇到的问题

父元素@click是返回到上一页，子元素@click是跳转到另一个页面，点击子元素直接跳转到另一个页面又跳转回来了，子元素改为@click.stop好了

延伸

事件冒泡是指在 DOM 中，事件从最具体的元素（事件的目标）开始向外传播到更不具体的元素（父元素），直到文档的根节点。这是浏览器处理事件的一种默认机制。

假设有以下 HTML 结构：

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');
  }
}

如果想阻止事件继续向上传播，可以在事件处理函数中调用 event.stopPropagation()，或者使用 Vue 的修饰符 @click.stop。

<button @click.stop="childMethod">Click Me</button>

在这种情况下，点击按钮只会触发 childMethod，不会触发 parentMethod。

事件冒泡是一个重要的概念，有助于管理复杂的事件处理逻辑。理解事件冒泡可以帮助你更好地控制事件在组件之间的传播，确保应用的行为符合预期。