What are some basic examples of using emit in Vue.js?

Can you explain how to use emit in Vue.js with some basic examples?

Sure! In Vue.js, the emit method is used to send events from a child component to a parent component. For example, if you have a button in a child component, you can emit an event when it's clicked.

Can you show me a simple code example of that?

Absolutely! Here's a basic example:

// ChildComponent.vue
<template>
  <button @click="sendMessage">Click me!</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from Child!');
    }
  }
}
</script>

// ParentComponent.vue
<template>
  <ChildComponent @message-sent="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(msg) {
      console.log(msg);
    }
  }
}
</script>

What happens when the event is emitted?

When the event is emitted, the parent component listens for it and executes the specified method, in this case, handleMessage, which logs the message to the console.