How to access a component property from App.vue

Question

I used vue-loader to help me install vue and webpack I have a file called App.vue

In App.vue I added a component called widget. If I clicked some button there's a function that set the btnClicked = true hence the widget appears

<widget v-show="btnClicked"></widget>

but I also want that function to access the widgetShowMe, it's a property in my component.

I want the function activated in my App.vue to also set widgetShowMe = true I tried this but it didn't work

methods:{
  btnClickedFunc () {
    this.btnClicked = true;
    Widget.widgetShowMe = true; 
  }
}

This won't work because firstly to access methods on your component you need to Component.methods.methodName post which, you still won't be able to use it like this and you shouldn't. Could you please specify what is it that you want to achieve with the inner components function? — Amresh Venugopal
– Amresh Venugopal, Commented Mar 6, 2017 at 13:53
i'm not trying to access a method, i need to access a component data so i also tried Widget.data.widgetShowMe = true; and it didn't work all i want is to show a component once a button is clicked — Habiba
– Habiba, Commented Mar 6, 2017 at 13:56
Okay, It wouldn't work that way. You would be better off using v-model. I'll add an answer to show how. — Amresh Venugopal
– Amresh Venugopal, Commented Mar 6, 2017 at 14:00

tony19 · Accepted Answer · 2022-07-15 21:27:05Z

Accessing child component's data in parent component in vuejs

If you have a parent component called parent and child component called child, you can communicate between each other using props and events.

props: Facilitates communication from parent to child.
events: Can be used to pass data in a child component to the parent component.

For this question we require events and will use v-model to make the child component usable everywhere with much less setup.

Vue.component('counter', {
  template: `<div><button @click='add'>+1</button>
  <button @click='sub'>-1</button>
  <div>this is inside the child component: {{ result }}</div></div>`,
  data () {
    return {
      result: 0
    }
  },
  props: ['value'],
  methods: {
    emitResult () {
      this.$emit('input', this.result)
    },
    add () {
      this.result += 1
      this.emitResult()
    },
    sub () {
      this.result -= 1
      this.emitResult()
    }
  }  
})

new Vue({
  el: '#demo',
  data () {
    return {
      resultFromChild: null
    }
  }
})

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id='demo'>
  <counter v-model='resultFromChild'></counter>
  This is in parent component {{ resultFromChild }}
</div>

Custom component with v-model

This needs two requirements.

You have a prop on the child component with the name value.

 props: ['value'], // this part in the child component snippet

You emit the event input with the value.

 this.$emit('input', this.result) // this part in the child component snippet

All you need to think of is, when to emit the event with the value of widgetShowMe, and your app.vue can easily capture the value inside your widget.

Collectives™ on Stack Overflow

How to access a component property from App.vue

1 Answer 1

Accessing child component's data in parent component in vuejs

Custom component with v-model

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Accessing child component's data in parent component in vuejs

Custom component with v-model

Comments

Your Answer

Sign up or log in

Post as a guest

Related