one component to another component in vuejs trigger function

1. Create the First Component (SenderComponent.vue):

<template>
  <div>
    <button @click="triggerFunction">Trigger Function</button>
  </div>
</template>

<script>
export default {
  methods: {
    triggerFunction() {
      this.$emit('function-triggered', / any data you want to pass /);
    }
  }
};
</script>

1. Import and Use the First Component in the Parent Component (ParentComponent.vue):

<template>
  <div>
    <sender-component @function-triggered="handleFunction"></sender-component>
  </div>
</template>

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

export default {
  components: {
    SenderComponent
  },
  methods: {
    handleFunction(/ any received data /) {
      // Your logic when the function is triggered
    }
  }
};
</script>

1. Create the Second Component (ReceiverComponent.vue):

<template>
  <div>
    <!-- Component content -->
  </div>
</template>

<script>
export default {
  props: {
    / any props you want to receive /
  },
  methods: {
    // Your methods
  }
};
</script>

1. Pass Data from Parent to Child Component (ParentComponent.vue):

<template>
  <div>
    <receiver-component :prop-name="dataToSend"></receiver-component>
  </div>
</template>

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

export default {
  components: {
    ReceiverComponent
  },
  data() {
    return {
      dataToSend: / data you want to pass /
    };
  }
};
</script>

1. Receive Data in Second Component (ReceiverComponent.vue):

<template>
  <div>
    <!-- Use received props and perform necessary actions -->
  </div>
</template>

<script>
export default {
  props: {
    propName: / specify the prop type if needed /
  },
  methods: {
    // Your methods
  }
};
</script>