在emit自定义事件处理函数中，如何同时接收父组件和子组件的参数？[项目笔记]

在项目开发中，以下图所示，在商品购买页面和购物车页面，同时都有用到操做数量的组件，因而我把它们抽离出来封装成了一个组件。

组件代码以下：

• 该组件接受父组件传过来的参数：goods_num(数值类型)--->表示商品的数量。
• 该组件的做用是修改商品数量，也就是说子组件要去修改goods_num的值。这时问题就出现了。

<template>
  <div class="num-edit-bar">
     <div class="bar">
        <button style="font-size:22px;border-right:1px solid #e0e0e0;" @click="editGoods('minus')">-</button>
        <input v-model="count">
        <button style="font-size:22px;border-left:1px solid #e0e0e0;" @click="editGoods('add')">+</button>
      </div>
  </div> 
</template>

<script>
export default {
  data () {
    return {
      count:this.goods_num?this.goods_num:1
    };
  },
  props:{
    goods_num:{
      type:Integer,
      default:0,
    }
  },
  methods: {
    editGoods(flag){
        if(flag==='minus'){
          if(this.count<=1){
            return;
          }
          this.count --;
        }else if(flag=='add'){
          this.count ++;
        }
        this.$emit('input',this.count)
      },
  }
}
</script>
....// css部分省略
复制代码

---

在goods_num发生改变以后，咱们组要通知父组件，咱们很容易想到使用emit.因而咱们很简单写出下面的代码：

methods: {
    editGoods(flag){
        ......
        this.$emit('input',this.count) //自定义一个`input`事件
     },
  }
复制代码

但仍然存在一个问题.

咱们先看一下，咱们在父组件是如何使用NumEditBar组件的。

<van-swipe-cell v-for="(item,index) in cartList" :key="item.goods_id" class="list-item" :right-width=80 >
     .....//父组件监听input事件
    <num-edit-bar slot="footer" :goods_num="item.goods_num" class="num-edit-bar" @input="editGoodsNum" ></num-edit-bar> </van-swipe-cell> 复制代码

methods:{
 editGoodsNum(number){
      ....// 代码一鼓作气写到这里懵逼了，我该怎么取到item啊
 },   
}
复制代码

如今咱们面临的主要问题时，如何获取item，一个很简单很天然的想法就是传参。 那么问题来了，咱们该怎么传呢？在万能网友的帮助下，终于算是如下面的方式解决了问题。

<num-edit-bar slot="footer" :goods_num="item.goods_num" class="num-edit-bar" @input="editGoodsNum(item,arguments)" ></num-edit-bar> 复制代码

editGoodsNum(){
     // 第二个参数也是
      arguments[0].goods_num = arguments[1][0]
},
复制代码

从上面的截图能够看出，第一个参数就是咱们要的 item，而第二个参数就是也是一个 arguments对象，里面包含了子组件传过来的参数。