使用事件修饰符-比如点击链接不跳转-.once 事件只触发一次

一、使用事件修饰符

在Vue里，事件修饰符就像是给事件加上的小贴士，让它们在触发时表现得更有规矩。常见的有几个：

• .stop: 避免事件继续向上冒泡。
• .prevent: 阻止事件默认行为，比如点击链接不跳转。
• .capture: 从捕获阶段开始监听事件。
• .self: 只有当事件在当前元素上触发时才执行。
• .once: 事件只触发一次。

比如，如果你想在点击按钮时不让页面滚动，可以这样写：

<button @click.prevent>点我试试</button>











二、使用自定义事件



自定义事件就像是组件间的一种秘密交流方式。父组件可以通过这种方式来监听子组件的事件。



子组件通过触发一个方法来发送自定义事件，父组件则通过监听这个事件来响应。



举个例子：



子组件：



<button @click="sendCustomEvent">告诉我一声</button>



methods: {



  sendCustomEvent() {



    this.$emit('my-event', '消息内容');



  }



}







父组件：



<child-component @my-event="handleCustomEvent"></child-component>



methods: {



  handleCustomEvent(message) {



    console.log(message);



  }



}











三、使用全局事件总线



全局事件总线就像是整个应用的大喇叭，任何组件都可以通过它来广播和接收消息。



创建一个事件总线：



const eventBus = new Vue();







然后在需要触发事件的组件中，通过事件总线来广播事件：



eventBus.$emit('global-event', '全球广播');







而在需要监听事件的组件中，通过事件总线来监听事件：



eventBus.$on('global-event', (data) => {



  console.log(data);



});















在Vue中拦截事件有三种主要方式：事件修饰符、自定义事件和全局事件总线。具体用哪种，得看你的应用需要什么。



事件修饰符适合简单的小操作。



自定义事件适合父子组件间的对话。



全局事件总线适合跨组件的大规模沟通。







相关问答



1. 什么是Vue拦截事件？



Vue拦截事件就是在Vue应用中，通过特定的方法或指令来截取并处理用户的事件，比如修改事件参数、阻止默认行为、添加额外逻辑等。







2. 在Vue中如何拦截事件？



在Vue中，你可以用以下几种方式来拦截事件：







  
事件修饰符



  
事件监听器



  
自定义指令











3. 实际应用中如何使用Vue拦截事件？



在实际应用中，拦截事件可以用来实现很多功能，比如表单验证、权限控制、事件代理等。



Vue拦截事件是实现特定功能或逻辑的重要手段，通过灵活运用这些方法，你可以让应用变得更加灵活和强大。