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; 
  }
}

Answer 1

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.

1. props: Facilitates communication from parent to child.
2. 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.

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

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

2. 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.