将数据从子节点传递到父节点而没有刚刚加载的事件，这可能是在vue世界中吗？

Question

我认为没有@-点击事件或事件或输入字段或者需要交互时只需要将数据从子数据变量传递到另一个数据变量中的父项，通过使用此数据中的变量和控制，我无法将数据从子节点传递到父节点父变量，只是在加载时，它可能吗？

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

```

Answer 1

@event是首选方式。

我过去通过传递一个函数作为道具来做到这一点，但这是一个反模式，应该避免。无论如何，除了警告，这是你如何做到这一点。

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

Answer 2

你可以使用sync。这是流程：

在您的父级中，sync将appGetData属性绑定到子组件：

<contributors :app-get-data:sync="appGetData"/>

现在在我们的子组件中，我们可以发回这个：

this.$emit('update:appGetData', response.data.reverse())

我们可以修改孩子使用property而不是数据：

Props: ['appGetData']

现在您的孩子可以将该道具传递给模板：

{{ appGetData }}

并且您拥有内聚的双向数据同步，其中父级是唯一的事实来源。

Answer 3

可能你想尝试provide/inject。

但要注意：

注意：提供和注入绑定不是反应性的。这是故意的。但是，如果传递观察对象，则该对象上的属性仍会保持反应。

下面是一个简单的演示（父组件向子组件提供其实例，然后子组件将其数据添加到父组件的一个数据属性）：

Vue.config.productionTip = false
let test = Vue.component('v-child', {
	template: `<div><button @click="getData()">Get Data</button>I am child: {{internalData}}</div>`,
  inject: {
  	_test: {
      default() {
        console.log('child must be inside one parent')
      }
    }
  },
  data() {
  	return {
  		internalData: {}
    }
  },
  methods: {
  	getData: function () {
    	setTimeout(()=>{
      	this.internalData = {value: 'Puss In Boots'}
        this.$set(this._test.$data.childrenData, this._test.$data.childrenData.length, this.internalData)
      }, 1500)
    }
  }
})

Vue.component('v-parent', {
	template: `<div><h2><button @click="changeData()">Next</button>Parent: {{childrenData}}</h2><hr><slot></slot></div>`,
  provide () {
    return {
      _test: this
    }
	},
  data() {
  	return {
    	childrenData: []
    }
  },
  methods: {
  	changeData: function () {
      if(this.childrenData.length>0) {
    	  this.$set(this.childrenData[this.childrenData.length-1], 'value', 'So funny...')
      } else {
        console.log('Empty...')
      }
    }
  }
})
new Vue({
	el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <v-parent><v-child></v-child></v-parent>
</div>