Vue.js中使用.prevent和.stop修饰符

当使用.prevent修饰符时，Vue.js将阻止元素的默认事件行为。下面是一个示例，展示如何在Vue.js中使用.prevent修饰符：

<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="message">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      message: ''
    };
  },
  methods: {
    
    submitForm() {
    
      // 在这里执行表单提交逻辑
      console.log('Form submitted');
    }
  }
};
</script>

在上述示例中，我们使用@submit.prevent来阻止表单的默认提交行为。当用户点击提交按钮时，Vue.js会调用submitForm方法进行表单提交逻辑处理，并且不会触发表单的默认提交行为。

而使用.stop修饰符时，Vue.js将阻止事件冒泡，即停止事件在DOM层次结构中的传播。下面是一个示例，展示如何在Vue.js中使用.stop修饰符：

<template>
  <div @click="parentClick">
    <div @click.stop="childClick">
      Click me
    </div>
  </div>
</template>

<script>
export default {
    
  methods: {
    
    parentClick() {
    
      console.log('Parent clicked');
    },
    childClick() {
    
      console.log('Child clicked');
    }
  }
};
</script>

在上述示例中，当用户点击"Click me"文本时，childClick方法将被调用，但parentClick方法不会被调用。这是因为我们在子元素上使用了@click.stop修饰符，它阻止了点击事件冒泡到父元素，所以只有子元素的点击事件被触发。