3

Anyone have idea about the common design problems we face in web components designs. I have started with Vuejs/ReactJS and Angular 2 but the most common problem I face is communication between components. I want to talk to other dynamic components and pass some data to it expecting data in return.

Like I have a repeated list of items and all the items I have to open a option picker menu(reusable). And I want to get back a callback as well when a option is selected. You can think of common Modal or Popover residing under the #app element.

Somehow I achieved this using PubSub pattern but don't think that it is good idea to use. Please suggest if anyone have any better idea about it.

Saurabh
  • 71,488
  • 40
  • 181
  • 244
Ashvin777
  • 1,446
  • 13
  • 19

2 Answers2

7

In vuejs, there are multiple modes you can communicate between dynamic components.

  • With props and events
  • With event bus
  • With centralised state

props and events

Communication between parent child components can be very trivial with help of props, which can take data from parent to child, and emit, which can raise events from child to parent. You can see a sample implementation here.

enter image description here

event bus

Non-parent child communication can be handled by a central event bus, with which you can send event to any other component, and as well listen to event raised by any component. To give an example:

var bus = new Vue()

in component A's method

bus.$emit('id-selected', 1)

in component B's created hook

bus.$on('id-selected', function (id) {
  // ...
})

Centralised state

However to prevent logic of communication become unmanageable, one can use a central state management, which can keep track of state, which can be accessed and updated by all the components. Here you can find a simple implementation of state management in very raw manner. How ever more popular among the community is vuex an Elm-inspired state management library, which is actually very similar to redux in functionality. You can see a sample implementation of this here.

enter image description here

tony19
  • 125,647
  • 18
  • 229
  • 307
Saurabh
  • 71,488
  • 40
  • 181
  • 244
  • The case is like - I have #app element and in that I have multiple components in parent child format. So consider that in the parent child tree at level 5th I have some repeated components and on those each components I want to add menu popover button. Clicking on that a menu should open with options. The menu components reside just at 1st layer from #app element. I want to communicate the options list from 5th layer component to 1st layer menu component and want to listen the click event back to the 5th layer components. Can you help please how can I solve this problem. – Ashvin777 Mar 16 '17 at 18:04
  • @Ashvin777 You can use eventBus, where-ever you need to call a method of other component and you can use vuex, if there are some object which is shared among these components. Hope it helps, Feel free to reply with more details or any specific query. – Saurabh Mar 16 '17 at 18:13
1

In Angular 2, use services to share data and to communicate between components. For options picker, create a common menu component in your app's shared folder. Pass options array as @Input() to display menu options dynamically and upon click, you can emit ActionId or anything else unique to that action then using pub/sub you can perform any action in any component.

Ali Shahzad
  • 5,163
  • 7
  • 36
  • 64