vue中的$emit

在 Vue 中，$emit 是一个用于在子组件中向父组件传递事件的机制。它允许子组件触发父组件的事件，从而实现父子组件之间的通信。

使用 $emit 的基本步骤

1. 在子组件中触发事件： 使用 $emit 方法在子组件中触发一个事件，并可以传递参数。

2. 在父组件中监听事件： 在父组件中使用 v-on 或 @ 指令监听子组件触发的事件。

示例

Child.vue（子组件）

<template>
  <button @click="sendMessage">Click me</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      // 触发事件，并传递数据
      this.$emit('message-sent', 'Hello from Child!');
    }
  }
}
</script>

 

Parent.vue（父组件）

<template>
  <div>
    <Child @message-sent="handleMessage" />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  methods: {
    handleMessage(msg) {
      // 处理来自子组件的消息
      console.log(msg); // 输出: Hello from Child!
    }
  }
}
</script>

 

解释

• 在 Child.vue 中，当用户点击按钮时，sendMessage 方法会被调用，this.$emit('message-sent', 'Hello from Child!') 会触发一个名为 message-sent 的事件，并传递一个字符串作为参数。
• 在 Parent.vue 中，父组件通过 @message-sent="handleMessage" 监听子组件发出的 message-sent 事件。当事件被触发时，handleMessage 方法会被调用，并接收传递的消息。

总结

$emit 是 Vue 中实现组件间通信的重要工具，它使得子组件能够向父组件传递信息，保持组件的灵活性和可维护性。