代码之家 › 专栏 › 技术社区 › Moumen Soliman

将数据从子级传递到父级,而无需加载事件,这在vue world上可能吗?

axios vuejs2 vue.js json javascript

Moumen Soliman · 技术社区 · 8 年前

像这样的

```

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

```

3 回复 | 直到 8 年前

Daniel 8 年前

@事件 是首选方式。

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

Ohgodwhy 8 年前

你可以用 sync 为了这个。流程如下:

在你父母身上, appGetData 属性并将其绑定到子组件:

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

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

property

Props: ['appGetData']

现在您的孩子可以将道具传递到模板:

{{ appGetData }}

而且您有内聚的双向数据同步,其中父级是唯一的真相来源。

Sphinx 8 年前

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>

Varun 6 年前

要将值从子组件传递到父组件,可以使用Sync修饰符。下面是相同的Vue文档 link

以下是实现预期结果的方法:

.sync 如下图所示

<contributors :appGetData.sync="appGetData"/>

现在,在子组件中,您可以 $emit 更新的 appGetData 使用以下代码:

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