Vue中怎么使用v on监听事件

Vue中使用v-on指令

Vue中提供了v-on指令来绑定事件，在HTML元素上添加v-on指令，可以监听对应的DOM事件，例如：点击事件、鼠标滚动事件、键盘输入事件等。v-on指令需要绑定一个处理事件的函数，在事件触发后，会自动调用对应的处理函数。下面是v-on指令的基本使用示例：

  
    

      点击我
    
    
  

在上面的代码中，我们使用了v-on指令来绑定一个处理点击事件的函数。当按钮被点击时，会触发handleClick方法，并弹出一个对话框提示“你点击了按钮”。

v-on指令的简写形式

为了简化代码，Vue提供了v-on指令的简写形式，我们可以使用@符号来代替v-on。下面是使用@符号简写的示例代码：

  
    

      点击我
    
    <
  

在上面的代码中，我们使用了@符号来代替v-on指令，代码更简洁清晰。

传递事件参数

在Vue中，我们可以使用$event参数来获取事件对象，然后将事件对象传递给处理函数。下面是一个传递事件参数的示例代码：

  
    

      点击我
    
    <
  

在上面的代码中，我们在点击事件的处理函数中传递了事件对象$event，并使用$event.target.tagName来获取事件对象的目标元素的标签名。

在组件中使用v-on指令

在Vue中，我们可以将组件看作是可以复用的模块，我们可以使用组件来构建整个应用程序。当然，在组件中我们也可以使用v-on指令来监听事件。下面是一个在组件中使用v-on指令的示例代码：

在上面的代码中，我们定义了一个名为“my-component”的组件，并在组件中使用了v-on指令来绑定一个自定义事件“custom-event”。当按钮被点击时，会触发自定义事件，并传递一个字符串参数“hello world”。在父组件中，我们使用@符号来监听自定义事件，并在处理函数中弹出一个对话框显示传递的字符串参数。