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

然后，如何将子数据（百分比）和父数据（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

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

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

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

2 个答案: