在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對象，裏面包含了子組件傳過來的參數。