Vue各种事件监听实例(小结)

Vue.js提供了许多事件监听方式，这些方式可以帮助我们在组件之间进行数据传递、状态管理及业务逻辑触发等操作。本文将阐述Vue.js的事件监听方式和监听器的详细介绍，包括：事件、监听键盘事件、绑定原生事件、自定义事件等几个方面。

1. 事件

在Vue.js中，可以通过$emit方法向父组件或它的祖先组件派发一个事件。$emit方法是Vue实例的一个方法，它通过第一个参数接收事件名称，后面的参数则是需要向监听该事件的组件传递的数据。

示例代码：

<!--组件A-->
<template>
  <div>
    <button @click="fireEvent">
      触发事件
    </button>
  </div>
</template>
<script>
export default {
  methods: {
    fireEvent() {
      this.$emit('my-event', 'event data')
    },
  },
}
</script>

<!--组件B-->
<template>
  <div>
    <child-component @my-event="handleEvent" />
    <p>组件A触发了事件</p>
  </div>
</template>
<script>
import ChildComponent from "./ChildComponent.vue";
export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleEvent(eventData) {
      console.log('Handle event:', eventData);
    }
  },
}
</script>

在组件A中，当点击按钮时触发fireEvent方法，并且向组件B派发一个名为my-event的事件。组件B可以通过在子组件上使用@my-event来监听该事件，并在handleEvent方法中接收派发的数据。

2. 监听键盘事件

在Vue.js中，可以使用@keydown来监听键盘事件。通过该方式，我们可以轻松地实现实时搜索、快速导航等功能。在键盘事件中，可以使用修饰符来进一步限制触发条件，如enter、ctrl等。下面是一个监听enter键的示例代码。

示例代码：

<template>
  <div>
    <input type="text" v-model="keyword" @keydown.enter="search" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      keyword: "",
    };
  },
  methods: {
    search() {
      console.log('Search for:', this.keyword);
    },
  },
}
</script>

在上述代码中，我们使用了v-model指令来绑定输入框的内容到keyword属性上，并且监听了keydown事件中的enter键。每当用户按下enter键时，将会触发search方法，并且打印出用户输入的搜索关键字。

3. 绑定原生事件

Vue.js提供了v-on指令可以用来绑定DOM元素的原生事件，比如click、input等。在绑定事件时，可以在方法名后面传递额外的参数和修饰符。

示例代码：

<template>
  <div>
    <button v-on:click="onClick('param1', 'param2')" >
      绑定原生事件
    </button>
  </div>
</template>
<script>
export default {
  methods: {
    onClick(param1, param2) {
      console.log('Click with params:', param1, param2);
    },
  },
}
</script>

在上述代码中，我们通过v-on:click指令来绑定onClick方法到button元素的click事件。onClick方法中的param1和param2参数分别接收了绑定时传递的参数，并且在打印日志时输出了这两个参数。

4. 自定义事件

在Vue.js中，可以自定义事件，并且使用$on方法来监听该事件。当定义了一个自定义事件之后，我们就可以在需要的地方进行派发了。例如，在一个模块化的程序中，我们可以使用自定义事件来实现各个模块之间的通信。

示例代码：

<!--ModuleA：定义自定义事件-->
<template>
  <div>
    <button @click="fireEvent">
      触发事件
    </button>
  </div>
</template>
<script>
export default {
  methods: {
    fireEvent() {
      this.$emit("module-a-event", "event data");
    },
  },
};
</script>

<!--ModuleB：监听自定义事件-->
<template>
  <div>
    <p>{{ eventData }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      eventData: "",
    };
  },
  mounted() {
    this.$parent.$on("module-a-event", (eventData) => {
      this.eventData = eventData;
    });
  },
};
</script>

在上述代码中，我们实现了一个模块化的程序，并且在模块A中定义了一个名为module-a-event的自定义事件，并且在点击按钮时派发该事件。在模块B中，我们通过使用$on方法来监听该事件，并在监听到事件时，更新了eventData属性并重新渲染页面。

总结

本文介绍了Vue.js的事件监听方式和监听器的详细介绍，包括：事件、监听键盘事件、绑定原生事件、自定义事件等几个方面。平时在Vue.js项目中，我们可以根据实际业务需求选择对应的事件处理方式，并根据需要进行二次封装来满足复杂业务逻辑的需求。