在加载时无需事件即可将数据从子级传递到父级，这在 vue 世界中可能吗？

我觉得如果没有 @- click 事件或事件或输入字段或某些需要交互的东西，则不可能将数据从子级传递到父级，只需在加载时通​​过使用此数据中的变量和控制将数据从子级数据变量传递到另一个数据变量中的父级父变量，只是加载时，可能吗？

将 JSON 数据从子级传递到父级并从父级控制它

像这样的东西

```

//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>

```

@event是首选方式。

我过去通过将函数作为 prop 传递来完成此操作，但这是一种反模式，应该避免。不管怎样，除了警告之外，你可以这样做。

// 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>

但在我看来，在这种情况下，倾听者可能仍然工作得更好并且更容易。您可以添加另一个then或使用内部watch触发该事件

那么再一个

  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))
  },

使用手表

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