Vue.js 中的 $emit 方法和 $on 方法及使用场景

Vue.js 是一款流行的前端框架，它提供了丰富的功能来简化前端开发。其中，$emit 方法和 $on 方法是 Vue.js 中非常重要的两个方法，它们可以帮助我们实现组件之间的通信，提高应用程序的复用性和可维护性。

$emit 方法

$emit 方法是 Vue.js 中用于触发自定义事件的方法。它可以将数据从一个组件传递到另一个组件，从而实现组件之间的通信。$emit 方法的语法如下：

this.$emit(eventName, data)

其中，eventName 是自定义事件的名称，data 是要传递的数据。在组件中，我们可以通过以下方式触发自定义事件：

this.$emit('my-event', { message: 'Hello Vue.js' })

上述代码将触发名为 my-event 的自定义事件，并传递一个包含 message 属性的对象作为数据。

$on 方法

$on 方法是 Vue.js 中用于监听自定义事件的方法。它可以在组件中监听另一个组件触发的自定义事件，并在事件触发时执行相应的逻辑。$on 方法的语法如下：

this.$on(eventName, callback)

其中，eventName 是要监听的自定义事件名称，callback 是事件触发时要执行的回调函数。在组件中，我们可以通过以下方式监听自定义事件：

mounted() {
  this.$on('my-event', (data) => {
    console.log(data.message)
  })
}

上述代码将在组件挂载后监听名为 my-event 的自定义事件，并在事件触发时输出传递的 message 属性。

使用场景

$emit 方法和 $on 方法在 Vue.js 中非常常用，它们可以帮助我们实现组件之间的通信，提高应用程序的复用性和可维护性。下面是一些常见的使用场景：

父子组件通信

在 Vue.js 中，父子组件之间的通信可以使用 props 和 $emit 方法来实现。父组件可以通过 props 将数据传递给子组件，子组件可以通过 $emit 方法将数据传递回父组件。下面是一个示例：

<template>
  <div>
    <child-component :message="message" @my-event="handleEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello Vue.js'
    }
  },
  methods: {
    handleEvent(data) {
      console.log(data.message)
    }
  }
}
</script>

在上述示例中，父组件通过 props 将 message 数据传递给子组件，子组件通过 $emit 方法将数据传递回父组件。

兄弟组件通信

在 Vue.js 中，兄弟组件之间的通信可以使用一个共同的父组件和 $emit 方法来实现。兄弟组件可以通过共同的父组件触发自定义事件来实现通信。下面是一个示例：

<template>
  <div>
    <child-component-1 @my-event="handleEvent"></child-component-1>
    <child-component-2></child-component-2>
  </div>
</template>

<script>
import ChildComponent1 from './ChildComponent1.vue'
import ChildComponent2 from './ChildComponent2.vue'

export default {
  components: {
    ChildComponent1,
    ChildComponent2
  },
  methods: {
    handleEvent(data) {
      console.log(data.message)
      this.$emit('my-event', data)
    }
  }
}
</script>

在上述示例中，父组件通过 $emit 方法触发名为 my-event 的自定义事件，并将数据传递给兄弟组件。

跨级组件通信

在 Vue.js 中，跨级组件之间的通信可以使用一个共同的祖先组件和 $emit 方法来实现。子组件可以通过 $emit 方法将数据传递给共同的祖先组件，其他子组件可以通过 $on 方法监听自定义事件来获取数据。下面是一个示例：

<template>
  <div>
    <parent-component @my-event="handleEvent">
      <child-component></child-component>
    </parent-component>
  </div>
</template>

<script>
import ParentComponent from './ParentComponent.vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ParentComponent,
    ChildComponent
  },
  methods: {
    handleEvent(data) {
      console.log(data.message)
    }
  }
}
</script>

在上述示例中，子组件通过 $emit 方法触发名为 my-event 的自定义事件，并将数据传递给共同的祖先组件。其他子组件可以通过 $on 方法监听该自定义事件来获取数据。

总结

$emit 方法和 $on 方法是 Vue.js 中非常重要的两个方法，它们可以帮助我们实现组件之间的通信，提高应用程序的复用性和可维护性。在实际开发中，我们可以根据具体的需求来选择合适的方法来实现组件之间的通信。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658e955ceb4cecbf2d475e0c