Pass variable from child component to parent?

Question

Vue.js

Hello. And how correctly to transfer values ​​from child component to parent.
Here is an example, but maybe there is a better solution? Thanks
Example

Vue.component('app-some', {
  props: ['valueParent', 'idParent'],
  template: `
    <div>
      <input v-model='valueChild' @input='onInput' >
    </div>
  `,
  data(){
    return {
      valueChild: ''
    }
  },
  mounted() {
    this.valueChild = this.valueParent;
  },
  methods: {
    onInput( ){
      this.$emit( 'changeValue', this.idParent, this.valueChild );
    }
  }
});



new Vue({
  el: '#app',
  template: `
    <div>
      <div v-for='(item, index) in items'>
        <app-some :valueParent='item.value' :idParent='index' @changeValue='changeItems' ></app-some>
      </div>
      <pre> {{ items }}</pre>
    </div>`,
  data() {
    return {
      items: [ { value: '1' }, { value: 2 }]
    }
  },
  methods: {
    changeItems(index, newValue) {
      this.items[index].value = newValue;
    }
  }
})

Answer 1

You have the right direction. This one -way binding approach is exactly what Vue.js requires. In this case, you are always in control of the input and output parameters.