Как передать данные дочернего и родительского компонента в метод - PullRequest
Новая
       8

Как передать данные дочернего и родительского компонента в метод

0 голосов
/ 26 ноября 2018

Я создаю форму с v-for синтаксисом.Я успешно получаю процентные данные от дочернего компонента, когда пишу только имя метода.

Родительский компонент 

<div v-for="(item, idx) in recipients"
     :key="idx">
  <range-input @sendValue="getPercentFromChild">
  </range-input>
</div>

...

getPercentFromChild(percent) {
    console.log(percent); // 50
  },

Дочерний компонент 

<div>
  <input type="range"
         value="0"
         @change="sendValue">
</div>

...

export default {
  ...
  methods: {
    sendValue() {
      this.$emit('sendValue', 50);
    },
  }
}

Тогда, Как я могу передать childданные (проценты) и родительские данные (индекс) к методам?

Как это, Родительский компонент 

<div v-for="(item, idx) in recipients"
     :key="idx">
  <range-input :currentPercent="0"
               @sendValue="getPercentFromChild(idx, percent)">
  </range-input>
</div>

...

getPercentFromChild(idx, percent) {
   console.log(idx, percent); // 0, undefined
},

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

вы можете поймать выбранное значение с параметром $event, вызывая обратный вызов для события sendValue.

Родительский компонент: 

<div v-for="(item, idx) in recipients"
     :key="idx">
  <range-input :currentPercent="0"
               @sendValue="getPercentFromChild(idx, $event)">
  </range-input>
</div>

...

getPercentFromChild(idx, percent) {
   console.log(idx, percent); // 0, 50
},

Вот демо Fiddle

0 голосов
/ 26 ноября 2018

Что вы можете сделать, это использовать emit дважды, но передать другие параметры.Звучит странно, но это работает.Попробуйте это: 

 <div v-for="(item, idx) in recipients"
     :key="idx">
  <range-input @sendValue="getPercentFromChild" v-on:sendValue="getIndex(idx)">
  </range-input>
</div>

, тогда вы можете использовать два метода и использовать их для установки элементов данных, которые вы используете в третьем методе: 

data: () => ({
        index: 0,
        percentFromChild: 0,
    }),
methods: {
    getPercentFromChild(percent) {
      this.percentFromChild = percent
    },
    getIndex(i) {
      this.index = i
      this.thirdFunction(this.percentFromChild, this.index)
    },
    thirdFunction(a, b) {
      //do stuff
    }
...