【VUE复习·2】@click 之事件处理与函数（可传参）；@click 阻止事件冒泡应用场景；@click 多修饰符应用场景（高级）

在Vue中，@click是一个常用的指令，用于绑定点击事件。在@click事件处理中，我们可以传递参数给事件处理函数，并且可以阻止事件冒泡。

1. 传递参数给事件处理函数：

<template>
  <button @click="sayHello('World')">Click me</button>
</template>
 
<script>
export default {
  methods: {
    sayHello(name) {
      alert(`Hello, ${name}!`);
    }
  }
}
</script>

在这个例子中，我们绑定了一个点击事件到按钮上，并且传递了字符串'World'作为参数给sayHello方法。

2. 阻止事件冒泡：

有时候，我们不希望事件继续冒泡到父元素。在Vue中，我们可以通过.stop修饰符来阻止事件冒泡。

<template>
  <div @click="parentClicked">
    <button @click.stop="childClicked">Click me</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    parentClicked() {
      alert('Parent clicked!');
    },
    childClicked() {
      alert('Child clicked!');
    }
  }
}
</script>

在这个例子中，我们在子元素按钮上使用了.stop修饰符，这样当按钮被点击时，事件不会冒泡到父元素，只会触发childClicked方法。