vuejs slots events

1. Define a parent component with a slot element:

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
};
</script>

1. Create a child component with an event:

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

<script>
export default {
  name: 'ChildComponent',
  methods: {
    triggerEvent() {
      this.$emit('custom-event', 'Event triggered from ChildComponent');
    },
  },
};
</script>

1. Implement the parent component and use the child component within its slot:

<!-- App.vue -->
<template>
  <div>
    <parent-component>
      <child-component @custom-event="handleCustomEvent"></child-component>
    </parent-component>
  </div>
</template>

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

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