#yyds干货盘点#【yyds干货盘点】5. Vue.js 事件处理

学习目录：

Vue.js 简介
Vue.js 实例与数据绑定
Vue.js 计算属性和侦听器
Vue.js 条件渲染和列表渲染
Vue.js 事件处理
Vue.js 表单输入绑定
Vue.js 组件基础
Vue.js 组件通信
Vue.js 插槽
Vue.js 动态组件和异步组件
Vue.js 自定义指令
Vue.js 过渡和动画
Vue.js 混入
Vue.js 自定义事件和 v-model
Vue.js 渲染函数和 JSX
Vue.js 插件
Vue.js 单文件组件
Vue.js Webpack 配置和打包优化
Vue.js Vue Router
Vue.js Vuex
Vue.js 服务端渲染
Vue.js 代码测试和调试
Vue.js 生态系统
Vue.js 最佳实践和性能优化
Vue.js 应用部署和上线

事件绑定

在 Vue.js 中，可以通过 v-on 指令来绑定事件。例如，下面的代码将在按钮被点击时调用 sayHello 方法：

<button v-on:click="sayHello">Say Hello</button>

在上面的代码中，v-on 是 Vue.js 中用于绑定事件的指令，click 是事件的名称，sayHello 是组件中定义的一个方法。

除了 v-on 指令，还可以使用 @ 缩写来进行事件绑定：

<button @click="sayHello">Say Hello</button>

这种写法与上面的写法是等价的。

除了 click 事件，Vue.js 还支持其他一些常见的事件，例如 keyup、keydown、submit 等等。可以在官方文档中查看完整的事件列表。

当然，以下是几个常见的事件处理的示例，供您参考：

1. 事件绑定

可以使用 v-on 指令来绑定事件，例如：

<button v-on:click="handleClick">Click me</button>

在上述示例中，当按钮被点击时，Vue.js 会自动调用 handleClick 方法。

2. 传递事件参数

有时候需要将事件参数传递给处理方法。可以使用 $event 特殊变量来传递事件参数，例如：

<button v-on:click="handleClick($event)">Click me</button>

在上述示例中，$event 是一个特殊变量，它会传递事件对象作为参数给 handleClick 方法。

3. 按键事件

可以使用 v-on:keyup 或 v-on:keydown 指令来监听键盘事件，例如：

<input v-on:keyup.enter="submitForm">

在上述示例中，submitForm 方法会在用户按下回车键时被调用。

4. 阻止事件冒泡

有时候需要阻止事件冒泡，可以使用 stopPropagation 方法，例如：

<div v-on:click="handleOuterClick">
  <button v-on:click.stop="handleInnerClick">Click me</button>
</div>

在上述示例中，当用户点击按钮时，handleInnerClick 方法会被调用，但是事件不会冒泡到父元素，也就不会触发 handleOuterClick 方法。

5. 阻止默认行为

有时候需要阻止事件的默认行为，可以使用 preventDefault 方法，例如：

<a href="#" v-on:click.prevent="handleClick">Click me</a>

在上述示例中，当用户点击链接时，handleClick 方法会被调用，但是链接不会跳转到指定的页面，因为默认行为已经被阻止。

希望这些示例能够对您有所帮助。

#yyds干货盘点#【yyds干货盘点】5. Vue.js 事件处理_Vue

自定义事件

除了绑定浏览器原生事件，Vue.js 还支持自定义事件。自定义事件可以帮助我们在组件之间进行通信。例如，下面的代码定义了一个名为 child-msg 的自定义事件：

Vue.component('child', {
  // ...
  methods: {
    sendMessage: function () {
      this.$emit('child-msg', 'Hello from child!');
    }
  }
});

在上面的代码中，$emit 方法用于触发 child-msg 事件，并传递了一个字符串参数。当 child-msg 事件被触发时，父组件可以通过 v-on 指令来监听这个事件：

<child v-on:child-msg="handleChildMsg"></child>

在上面的代码中，handleChildMsg 是父组件中定义的一个方法，它将被调用并传递 child-msg 事件的参数。

示例

下面是一个简单的示例，演示了如何在 Vue.js 中处理事件：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Event Handling Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <button v-on:click="sayHello">Say Hello</button>
    <p>{{ message }}</p>
    <child v-on:child-msg="handleChildMsg"></child>
  </div>

  <script>
    Vue.component('child', {
      template: '<button v-on:click="sendMessage">Send Message to Parent</button>',
      methods: {
        sendMessage: function () {
          this.$emit('child-msg', 'Hello from child!');
        }
      }
    });

    var app = new Vue({
      el: '#app',
      data: {
        message: ''
      },
      methods: {
        sayHello: function () {
          this.message = 'Hello!';
        },
        handleChildMsg: function (msg) {
          this.message = msg;
        }
      }
    });
  </script>
</body>
</html>

在上面的代码中，我们定义了一个名为 app 的 Vue 实例，它包含一个按钮和一个 child 组件。单击按钮将调用 sayHello 方法，而 child 组件将触发一个自定义事件 child-msg。当 child-msg 事件被触发时，handleChildMsg 方法将被调用，并将事件的参数赋值给 message 数据属性。

总结

本文介绍了 Vue.js 中的事件处理，包括事件绑定和自定义事件。通过 v-on 指令和 $emit 方法，我们可以在 Vue.js 中轻松地处理浏览器原生事件和自定义事件。在开发 Vue.js 应用程序时，了解如何处理事件是非常重要的。在处理事件时，我们需要注意以下几点：

使用 v-on 指令来绑定事件，可以使用 @ 缩写来替代。
Vue.js 支持常见的浏览器原生事件，例如 click、keyup、keydown、submit 等等。
自定义事件可以帮助我们在组件之间进行通信，可以使用 $emit 方法来触发自定义事件。
在处理事件时，我们需要关注事件参数的传递和处理。

最后，我们需要注意的是，在 Vue.js 中，事件处理是一个非常重要的概念。对于事件处理的深入理解将有助于我们更好地构建 Vue.js 应用程序。

标签：yyds,Vue,自定义,js,盘点,干货,事件,child,msg
From： https://blog.51cto.com/u_16123429/6454720