Access application variable from a component in vue?

Question

I know this question may be duplicated or asked several times. But I'm so new in Vue and I'm not able to find a clear question. How can I read/write a variable from the app into the components? All I see around they are passing values from the parent component into the child component. This seems like is not working in this case. This is the structure of my app, I would like to keep this structure.

let app = Vue.createApp({
    components:['contrib'],
    data(){
        return{
            contButton:"first value",
        }
    },
    methods: {
        someMethods:{
        },
    },
})


app.component('contrib',{
    props:['contButton'],
    template: `
    <div>
        <button class="button is-small" id="myBtn" @click="showCont">{{contButton}}</button>
    </div>
    `,
    data(){
        return{
            newCont:null,
        }
    },
    methods:{
            showCont() {
            this.newCont=this.contButton
            console.log(this.newCont)
        },
    }
})  


app.mount('#app')

This will probably help you - stackoverflow.com/a/74095731/14569750 — ericmp
– ericmp, Commented Oct 17, 2022 at 11:55

Levan Gogoladze · Accepted Answer · 2022-10-17 12:04:01Z

0

If You want to:

Share data from parent to child use props or maybe emitting custom events.
Create an app-level shared state use Pinia or Vuex
Share data between components use Event Bus

answered Oct 17, 2022 at 12:04

Levan Gogoladze

312 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rohìt Jíndal · Accepted Answer · 2022-10-18 06:08:03Z

0

As both the component are in a same page, I am assuming both are having sibling relationship. If Yes, You can give a try to below approach :

Pass the variable from Component 2 to the parent via emitting an event.
Now, after capturing the variable, You can pass that variable as a prop in Component 1.

Live Demo (Just for understanding, I am using Vue 2, You can change it as per your Vue version) :

Vue.component('component1', {
  props: ['variable', 'childmsg'],
  template: '<p>{{ childmsg }}</p>',
  mounted() {
    setTimeout(() => {
        console.log(this.variable)
    })
  }
});

Vue.component('component2', {
  data(){
    return{
      variable2: '123'
    }
  },
  mounted() {
    this.$emit('component-2-variable', this.variable2)
  },
  props: ['childmsg'],
  template: '<p>{{ childmsg }}</p>'
});

var app = new Vue({
  el: '#app',
  data: {
    component2Var: null
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component1 :variable="component2Var" childmsg="This is Component 1"></component1>
  <component2 @component-2-variable="component2Var = $event" childmsg="This is Component 2"></component2>
</div>

answered Oct 18, 2022 at 6:08

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

2 Comments

Florjan Over a year ago

Thnx Rohit, however I'm not sure if I can integrate it. In fact, I was expressed not so clear. I changed the script because I want to pass the variable from the app into a component.

Rohìt Jíndal Over a year ago

@Florjan You can try to implement the way I mentioned. I hope It will work and if it works please do accept this answer. So that it will be helpful for other developers as well.

Collectives™ on Stack Overflow

Access application variable from a component in vue?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related