Vue如何将子组件和父组件数据传递给方法答案

【问题标题】：Vue how to pass child and parent component data to methodVue如何将子组件和父组件数据传递给方法
【发布时间】：2019-04-27 21:06:13
【问题描述】：

我使用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);
    },
  }
}

那么，如何将子数据（百分比）和父数据（indx）传递给方法？

像这样，父组件

<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
},

【问题讨论】：

标签： vue.js vuex nuxt.js

【解决方案1】：

您可以使用$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

【讨论】：

【解决方案2】：

你可以做的是使用两次发射，但传入不同的参数。可能听起来很奇怪，但它确实有效。试试这个：

 <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
    }

【讨论】：