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

In App.vue I added a ponent 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 ponent.

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

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

In App.vue I added a ponent 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 ponent.

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

• javascript
• web-deployment
• vuejs2

• This won't work because firstly to access methods on your ponent 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 ponents function? – Amresh Venugopal Commented Mar 6, 2017 at 13:53
• i'm not trying to access a method, i need to access a ponent data so i also tried Widget.data.widgetShowMe = true; and it didn't work all i want is to show a ponent once a button is clicked – 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 Commented Mar 6, 2017 at 14:00
• Can you add the code for the Widget? – Amresh Venugopal Commented Mar 6, 2017 at 16:09

1 Answer 1

Accessing child ponent's data in parent ponent in vuejs

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

1. props: Facilitates munication from parent to child.
2. events: Can be used to pass data in a child ponent to the parent ponent.

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

Vue.ponent('counter', {
  template: `<div><button @click='add'>+1</button>
  <button @click='sub'>-1</button>
  <div>this is inside the child ponent: {{ 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/js/vue.min.js"></script>
<div id='demo'>
  <counter v-model='resultFromChild'></counter>
  This is in parent ponent {{ resultFromChild }}
</div>

Custom ponent with v-model

This needs two requirements.

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

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

2. You emit the event input with the value.

    this.$emit('input', this.result) // this part in the child ponent 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.