CODEWITHSUNDEEP
vue.js
Jonas__G
Jonas__G

Reputation: 185

Wrong component structure - prop-problems

I'm a noob and I'm trying to get my head around vue.js. In a particular route I have a view that looks like this

<template>
    <div class="section">
        <h1 class="title">Maintenance</h1>
        <app-tabs></app-tabs>
        <div class="columns">
            <div class="column is-one-third">
                <app-taglist></app-taglist>
            </div>
            <div class="column is-two-thirds">
                <app-form></app-form>
            </div>
        </div>
    </div>
</template>

<script>
import Taglist from "@/components/Taglist.vue";
import Tabs from "@/components/Tabs.vue";
import Form from "@/components/Form.vue";

export default {

}
</script>

Now I do understand the basics of passing data from a component to a child component, but what I'm actually trying to do is to pass data from app-tabs to app-taglist and from app-taglist to app-form. I'm starting to think that I'm attacking this all wrong, but if I do change my structure so that app-taglist is a child of app-tabs and app-form is a child of app-taglist - I can't really make proper use of the simple bulma, responsive, styling ...?

BTW: all components is registered globally at this time.

What kind of aproach would you advise me to look into - keeping in mind that I'm a noob.

Upvotes: 1

Views: 26

Answers (1)

Nick Martin
Nick Martin

Reputation: 729

Once you start getting to the point where you need to handle passing data between multiple components then I would consider using Vuex in order have a global component state that is accessible from all of your components.

Basically you can then create a totally separate "store" to hold your app's state (data):

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

And then from within each component, you can:

  • Use "getters" to read data from the store
  • Use "actions" to dispatch async functions that will "mutate" the store

e.g:

store.commit('increment') // this is a mutation
console.log(store.state.count) // -> 1

Upvotes: 1

Related Questions