事件修饰符.stop和.self有什么区别?请编写代码说明。
时间: 2023-12-15 13:06:51 浏览: 26
在 Vue.js 的事件监听中,`.stop` 和 `.self` 是两种修饰符,它们的作用是阻止事件向上冒泡和限制事件只在当前元素上触发。
`.stop` 会阻止事件继续向父元素传播,即阻止事件冒泡。例如:
```html
<div @click="parentClick">
<button @click.stop="childClick">click me</button>
</div>
```
在这个例子中,当点击按钮时,其父元素的 `parentClick` 事件不会被触发。
`.self` 会限制事件只在当前元素上触发,而不包括其子元素。例如:
```html
<div @click.self="parentClick">
<button @click="childClick">click me</button>
</div>
```
在这个例子中,当点击按钮时,只有按钮上的 `childClick` 事件被触发,父元素的 `parentClick` 事件不会被触发。
以下是一个完整的示例:
```html
<template>
<div @click="parentClick">
<button @click.stop="childClick">click me</button>
<button @click.self="childClick">click me too</button>
</div>
</template>
<script>
export default {
methods: {
parentClick() {
console.log("parent clicked");
},
childClick() {
console.log("child clicked");
},
},
};
</script>
```
当点击第一个按钮时,只会触发 `childClick` 事件,当点击第二个按钮时,会先触发 `childClick` 事件,再触发 `parentClick` 事件。