实例详解vue的on方法

什么是$on方法

在Vue中，$on()函数用于监听自定义事件。如果在应用程序中需要处理自定义事件，此时可以使用$emit()方法触发自定义事件。而当自定义事件被触发时，需要有一个监听机制来执行相关代码，这时就需要使用$on()方法来监听该事件。

// 一个简单的组件，它通过事件监听来更新父组件的数据
const ChildComponent = Vue.extend({
  props: ['data'],
  methods: {
    handleClick() {
      this.$emit('update', 'new value')
    }
  }
})

如何使用$on方法

使用$on()方法的流程非常简单。首先，需要事件的触发机制来执行$emit()方法；然后在目标组件中使用$on()方法监听该事件。

// 监听组件的 'update' 事件
vm.$on('update', function(value) {
  console.log(value)
})

这里我们先调用$on()方法，在组件中监听自定义事件。当组件触发事件时（例如在上一个代码块中使用的$emit()方法），该事件将调用函数参数并传递相关数据。

$on方法监听函数的重复定义

在使用$on()方法时，可能会出现监听函数的重复定义。这种情况下，每次该事件被触发时，监听函数都会被重复执行。

但是如果仅需要在首次监听事件时执行一些代码，则可以使用$once()方法。$once()方法类似于$on()方法，但是它仅监听一次事件。

// 仅监听一次 'update' 事件
vm.$once('update', function(value) {
  console.log(value)
})

总结

在Vue中，自定义事件的触发和监听是非常常用的机制。$on()方法可以用来监听自定义事件，并在事件触发时执行相应的代码。同时，使用$once()方法可以覆盖$on()方法的重复监听问题，并仅在首次监听事件时执行相关代码。

通过这些机制，我们可以在Vue应用程序中构建充分的交互，从而使其更加灵活和智能。