Vue3自定義事件中，子組件有返回參數，父組件也有參數的處理方法

前言

在 vue 自定義事件中，子組件會通過 emit 向父組件傳遞參數，父組件執行回調函數。但是有時候父組件再執行回調時也會傳入參數，如果直接給父組件回調函數傳入參數會覆蓋掉子組件的參數。我們有三種解決辦法

正文

結合案例具體介紹一下

方法一： $event 方法

// 子組件中 Child.vue
<script setup>
  const { proxy } = getCurrentInstance()
  function edit (item) {
      console.log('子組件參數', childParam)
      proxy.$emit('edit', childParam)
  }
</script>

......

// 父組件接收參數
<Child @edit="editFun($event, parentParam)"></Child>

當子組件有參數返回時，在父組件中使用 $event 作為占位符，這里 $event 就代表了子組件返回的參數。這里 $event 位置沒有限制，可以在第一位，也可以在最后一位

局限性： 只適合子組件返回一個參數的情況，如果子組件有多個參數返回，只能接收到第一個參數

方法二：箭頭函數法

// 子組件中 Child.vue
<script setup>
  const { proxy } = getCurrentInstance()
  function edit (item) {
      proxy.$emit('edit', childParam1, childParam2)
  }
</script>

......

// 父組件接收參數
<Child @edit="(param1,param2)=>editFun(param1,param2,parentParam)""></Child>

<script setup>
function editFun(p1,p2,p3){
  ...
}
</script>

這種方法利用了一個箭頭函數先把子模塊返回的參數接收，然后再傳遞到回調函數中

使用是注意先接收子模塊返回的參數，此方法對參數個數沒有限制。

方法三：arguments 方法 （vue3中測試結果是不生效）

尤大大說的可以https://github.com/vuejs/vue/issues/5735, 但是我沒測試成功
此方法類似於方法一，只不過是用 arguments 作為占位符,這里 argument 是一個數組

// 父組件接收參數
<Child @edit="editFun(arguments, scope.row)"></Child>

<script setup>
function editFun(p1,p2){
  ...
}
</script>