Vue JS Components structure

Question

I am learning Vue and my doubt is about the structure of my Vue app.

I learnt that the components can include both logic and template. Then I separated my components and everyone is getting the config from the main app (config is an object with the coordinates config.ll, config.lng).

I do the ajax call to my search-and-discovery API service and I display the results inside each components (current location, venues-near-you etc).

My question is: is it correct to encapsulate the calls into each components? Or is it better to get the needed data inside the general app and then share the results with the components using pros?

I am asking that because the hard part is starting now when I want to communicate the click of a category to the venuesNearYou component, I tried to use the emit without success.

//MAIN
<sidebar :config="config"></sidebar>
<content :config="config"></content>

//IN SIDEBAR
<currentLocation :config="config"></currentLocation>
<categories :config="config"></categories>

//IN CONTENT
<venueDetails :config="config"></venueDetails>
<venuesNearYou :config="config"></venuesNearYou>

Bhavesh Bhavesh · Accepted Answer · 2019-08-02T11:10:19

I think you could use event Bus like approach we have three type of communication in vue app (without vuex) - Parent to child communication which is full field by props - child to parent communication handle by custom event from child which is listen by parent - communication between non parent child component in which we use event bus approach Parent to child example -

Child to parent example - In child this.$emit('sendDataToParent',{someData:"some data"}}) - in parent

Event Bus in main vue instance const eventBus = new Vue()

in some component from where to send data import eventBus eventBus.$emit('someEvent','some data')

in some component from where to receive data

created() {
// register listener
  eventBus.$on('someEvent',()=>{

}) }

For more reference https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event https://medium.com/easyread/vue-as-event-bus-life-is-happier-7a04fe5231e1

Vue JS Components structure

2 Answers