bogdan_uman
@bogdan_uman
шлЫмазл неукЪ-поцЪ

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

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

Пример

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;
    }
  }
})
  • Вопрос задан
  • 164 просмотра
Пригласить эксперта
Ответы на вопрос 1
rshaibakov
@rshaibakov
Web-разработчик
У вас верное направление. Именно такой подход одностороннего байндинга и требует Vue.js. В таком случае вы всегда контролируете входные и выходные параметры.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы