Pass data from child to parent without events just on load, it’s possible on vue world?

I feel that impossible to pass data from child to parent without @- click event or events or input fields or something need to interaction just on load pass data from child data variable to parent in another data variable by using variable and control in this data from the parent variable, just on load, it’s possible?

Pass JSON data from child to parent and control it from the parent

something like this

“`

//child.vue
<template>
  <div>
    {{getData}}
  </div>
</template>

<script>
export default {
  name: 'Contributors', // this is the name of the component
  data () {
    return {
      getData: null
    }
  },
  mounted () {
    this.$http
      .get('https://api.github.com/repos/moumen-soliman/frontend-helper/stats/contributors')
      .then(response => (this.getData = response.data.reverse()))
      .catch(error => console.log(error.response))
  }
}
</script>


app.vue
<template>
  <div id="app">
    <contributors /> //here just pass json data but I can't control it or make it equal variable in app.vue
    {{appGetData}} // i need to make it data equal current variable in parent data

  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      appGetData: contributors.getData // I need something like this 
    }
  }
}
</script>

“`

Answer

@event is the preferred way.

I’ve done this in the past by passing a function as a prop, but this is an antipattern, and should be avoided. Anyway that warning aside, here’s how you could do it.

// child.vue
<template>
  <div>
    {{getData}}
  </div>
</template>

<script>
export default {
  name: 'Contributors', // this is the name of the component
  data () {
    return {
      getData: null
    }
  },
  props: {
    setAppGetData: {
      type: Function,
    },
  },
  mounted () {
    this.$http
      .get('https://api.github.com/repos/moumen-soliman/frontend-helper/stats/contributors')
      .then(response => (this.getData = response.data.reverse()))
      .then(() => (this.setAppGetData(this.getData) ) // run function here
      .catch(error => console.log(error.response))
  },
}
</script>


// app.vue
<template>
  <div id="app">
    <contributors :setAppGetData="setAppGetData"/> //here just pass json data but I can't control it or make it equal variable in app.vue
    {{appGetData}} // i need to make it data equal current variable in parent data

  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      appGetData: null // I need something like this 
    }
  },
  methods: {
    setAppGetData (data) {
      this.appGetData = data
    }
  }
}
</script>

But it seems to me that in this case, a listener may still work better and be easier. You can just add another then or use an internal watch to trigger that event

one more then

  mounted () {
    this.$http
      .get('https://api.github.com/repos/moumen-soliman/frontend-helper/stats/contributors')
      .then(response => (this.getData = response.data.reverse()))
      .then(() => (this.$emit('dataLoaded', this.getData) ) // emit data
      .catch(error => console.log(error.response))
  },

using watch

  watch: {
    getData(newValue) {
      this.$emmit('dataUpdated', newValue)
    }
  },