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

Posted 2023-02-23

【中文标题】Vue如何将子组件和父组件数据传递给方法

【英文标题】：Vue how to pass child and parent component data to method

【发布时间】：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
,

【参考方案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