CODEWITHSUNDEEP
vue.jsvue-component
Khadija Tul Kubra Zaki
Khadija Tul Kubra Zaki

Reputation: 59

Events between unrelated components Vuejs

I have two Vue.js parent components.

In one component, it shows available names list which are its child components and in other it shows already selected names list.

What I want to do is that when I click on an available name, it should hide from that component and show it in the other component. And the same if I remove from a selected it should appear in available list.

But these two components are completely unrelated. How can I do this?

Upvotes: 1

Views: 751

Answers (1)

T. Short
T. Short

Reputation: 3614

Option 1

Create a vuex store:

https://vuex.vuejs.org/guide/

This will allow you to share information between components.

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application

Options 2

Use something called an event bus:

https://blog.logrocket.com/using-event-bus-in-vue-js-to-pass-data-between-components/

With this method you can create events in one component and catch them in another component and they don't have to have a parent/child relationship.

Which option to go for depends on your preference and you will have to determine which is best suited for you.

Upvotes: 3

Related Questions