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

Question

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

那么，如何将子数据(percent) 和父数据(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
},

Answer 1

你可以做的是使用 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
    }

Answer 2

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

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

Vue how to pass child and parent component data to method

vue.js

vuex

nuxt.js