Передать переменную от дочернего компонента к родительскому?

Question

[Богдан]

Здравствуйте. А как правильно передавать значения от дочернего компонента к родительскому.
Вот наваял пример, но может есть более правильное решение? Спасибо

Пример

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

[Рамиль]

У вас верное направление. Именно такой подход одностороннего байндинга и требует Vue.js. В таком случае вы всегда контролируете входные и выходные параметры.

Comments

[Богдан]

А чем чревато, если например передавать в дочерний компонент объект, а объект является ссылкой, тем самым не нужно будет передавать событие наверх родителю?

[Рамиль]

Ответы здесь и здесь