Передача данных от ребенка к родителю без событий только при загрузке, это возможно в виртуальном мире?

Question

Я чувствую, что невозможно передать данные от дочернего элемента к родительскому элементу без события @-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>

`` `

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

Возможно, вы хотите попробовать предоставить / ввести .

Но обратите внимание на:

Примечание : привязки подачи и впрыска НЕ ​​являются реактивными. Это намеренным. Однако, если вы передадите наблюдаемый объект, свойства на этом объекте остаются реактивными.

Ниже приведена одна простая демонстрация (родительский компонент предоставляет свой экземпляр дочернему элементу, затем дочерние элементы добавляют свои данные в одно свойство данных родительского компонента):

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>

Answer 3

Вы можете использовать sync для этого. Вот поток:

В вашем родителе sync свойство appGetData и его привязка к дочернему компоненту:

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

Теперь в нашем дочернем компоненте мы можем просто выдать это обратно:

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

И мы можем изменить дочерний элемент для использования property, а не данных:

Props: ['appGetData']

Теперь ваш ребенок может просто передать эту опору шаблону:

{{ appGetData }}

И у вас есть согласованная двухсторонняя синхронизация данных, где родитель является единственным источником правды.