Passing data to another component in vue.js inside Laravel

Published 2 months ago by afoysal

I have below HTML code in one of my Laravel blade (view) file.

<div id="search-applicants" class="container2">
    <div class="leftbar">
        <leftbar></leftbar>
    </div>
    <div class="applicant-list">
        <applicants></applicants>
    </div>
</div>

How can I send value from leftbar component to applicants component ?

tykus
tykus
2 months ago (534,910 XP)

Communication between unrelated components can be achieved using the built-in event system. Specifically, you can define an Event Bus on the window (so it is visible to all components) using a new Vue instance, use it to emit and listen in the individual components:

const EventBus = new Vue();

// LeftBar.vue
export default {
    // ...
    EventBus.$emit('event-name', data);
}


// Applicants.vue
export default {
    methods: {
        handleEvent (data) {
            // do the thing
        }
    },
    created () {
        EventBus.$on('event-name', handleEvent(data))
    }
}
wilk_randall

You can also use Vuex to store state and data between components.

tykus
tykus
2 months ago (534,910 XP)

Personal preference @wilk_randall but I would avoid Vuex for this scenario unless there was a reason to persist the state.

wilk_randall

I would too for simple scenarios, but it is a way regardless.

Please sign in or create an account to participate in this conversation.