vue函数@click.prevent的使用解析

当我们使用Vue.js开发前端应用时，经常会在模版中使用@click指令来响应用户的点击事件，在一般情况下，点击事件会导致页面的跳转或刷新等行为，但是有时候我们需要控制点击事件的默认行为，这时候就需要使用@click.prevent修饰符。

@click.prevent能够阻止点击事件的默认行为，例如在表单的提交按钮中使用@click.prevent可以阻止表单的默认提交操作，然后我们就有机会在JS中对表单数据进行处理和操作。

例如，我们在编辑页面中有一个保存按钮，点击该按钮会提交表单，那么就可以使用@click.prevent来阻止默认事件，使用JS来处理数据，例如：

<template>
  <div>
    <form>
      <label>标题</label>
      <input type="text" v-model="title">
      <br>
      <label>内容</label>
      <textarea v-model="content"></textarea>
      <br>
      <button @click.prevent="save">保存</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: ''
    }
  },
  methods: {
    save() {
      // 在此处理表单数据
    }
  }
}
</script>

上面的代码中，我们在保存按钮上使用了@click.prevent修饰符来阻止默认的表单提交行为，在JS代码中使用save方法来处理表单数据。

除了阻止默认事件之外，@click.prevent还可以和其他修饰符一起使用，例如@click.prevent.stop表示阻止默认事件并且阻止事件冒泡，@click.prevent.self表示只在点击了元素自身时才阻止事件默认行为，如果点击了元素的子元素则不阻止。

例如，我们在一个下拉列表的按钮上使用@click.prevent.stop修饰符来阻止默认行为并防止事件冒泡，同时使用@blur事件来在下拉列表失去焦点时隐藏下拉列表。

<template>
  <div>
    <button @click.prevent.stop="showList">下拉列表</button>
    <ul v-show="listShow" @blur="hideList">
      <li>选项1</li>
      <li>选项2</li>
      <li>选项3</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listShow: false
    }
  },
  methods: {
    showList() {
      this.listShow = !this.listShow
    },
    hideList() {
      this.listShow = false
    }
  }
}
</script>

上面的代码中，在点击按钮时使用@click.prevent.stop来阻止默认行为和事件冒泡，同时使用了v-show指令来根据listShow状态来控制下拉列表的显示和隐藏，使用@blur事件来在下拉列表失去焦点时隐藏下拉列表。