vue中关于$emit和$on的使用及说明

下面我将为大家详细讲解一下Vue中关于$emit和$on的使用及说明。

1. $emit和$on的功能介绍

$emit和$on是Vue中非常重要的两个API，它们分别用于实现组件的自定义事件的触发和监听。

具体来说，$emit可以让子组件向父组件通信，而$on则是用于监听子组件发出的事件。

2. $emit的使用

假设我们有一个父组件和一个子组件，现在我们需要在子组件中触发一个事件并将一些数据传递给父组件。

首先，在子组件中，我们需要使用$emit来触发事件并传递数据。示例代码如下：

Vue.component('my-component', {
  template: '<button @click="onClick">Click Me</button>',
  methods: {
    onClick: function () {
      this.$emit('my-event', { message: '传递的数据' })
    }
  }
})

在上述代码中，我们定义了一个名为"my-event"的自定义事件，并在事件中传递了一个名为"message"的数据。

接下来，在父组件中，我们可以使用v-on来监听子组件发出的自定义事件，并从事件参数中获取到子组件传递过来的数据。示例代码如下：

new Vue({
  el: '#app',
  template: '<my-component @my-event="onMyEvent"></my-component>',
  methods: {
    onMyEvent: function (data) {
      console.log(data.message) // 打印 "传递的数据"
    }
  }
})

在上述代码中，我们使用v-on来监听子组件发出的"my-event"自定义事件，并将其绑定到了一个名为"onMyEvent"的函数上。该函数会在事件触发时被调用，并将子组件传递过来的数据作为参数传入。

3. $on的使用

除了$emit，Vue还提供了另外一个非常重要的API——$on，用于监听组件发出的自定义事件。

示例代码如下：

Vue.component('my-component', {
  mounted: function () {
    this.$root.$on('my-custom-event', this.handleCustomEvent)
  },
  methods: {
    handleCustomEvent: function (data) {
      console.log(data.message) // 打印 "传递的数据"
    }
  }
})

在上述代码中，我们使用$on来监听一个名为"my-custom-event"的自定义事件，并将其绑定到了一个名为"handleCustomEvent"的函数上。

注意，我们监听的是$root而不是该组件本身。这是因为我们希望组件能够在整个应用程序中共享该事件，而不仅仅是在该组件中。

接下来，在任何位置上触发该自定义事件即可，如下所示：

this.$root.$emit('my-custom-event', { message: '传递的数据' })

在上述代码中，我们使用$emit来触发一个名为"my-custom-event"的自定义事件，并在事件中传递一个名为"message"的数据。

当这个事件被触发时，组件中注册的监听函数"handleCustomEvent"会被调用并传入子组件传递的数据。

4.总结

以上就是关于Vue中关于$emit和$on的使用及说明的详细攻略了。$emit和$on是Vue中非常重要的API，可以帮助我们实现组件间的通信，特别是在处理父子组件之间的通信时非常有帮助。通过本篇攻略，相信大家已经对$emit和$on有了更加深入的理解。