任务5-4知识技能：.stop作用

vue.js中的.stop修饰符用于阻止事件冒泡**。当一个子元素的事件被触发时，默认情况下该事件会向上冒泡到父元素。使用.stop修饰符可以阻止这种冒泡行为，从而防止事件传播到父元素。

使用场景和示例

在Vue实例中，.stop修饰符通常用于需要阻止事件冒泡的事件绑定中，例如按钮点击事件、链接点击事件等。以下是一个使用.stop修饰符的示例：

<div @click="handleParentClick">
  <button @click.stop="handleButtonClick">Click Me</button>
</div>

在这个例子中，当按钮被点击时，handleButtonClick 方法会被执行，但是事件不会冒泡到父元素的 handleParentClick 方法。

代码示例

以下是一个简单的Vue组件示例，展示了如何使用.stop修饰符：

<template>
  <div @click="parentMethod">
    <button @click.stop="childMethod">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'TestVue',
  setup() {
    const childMethod = () => { console.log('childMethod') };
    const parentMethod = () => { console.log('parentMethod') };
    return { childMethod, parentMethod };
  }
}
</script>

在这个例子中，当按钮被点击时，childMethod 会被执行，但是事件不会冒泡到父元素的 parentMethod