Vue 如何同时传递子组件和父组件的参数给方法

发表于 分类于 ， ， ， 本文字数： 1.3k 阅读时长 ≈ 1 分钟

前言

在 vue 自定义事件中，子组件会通过 emit 向父组件传递参数，父组件执行回调函数。但是有时候父组件再执行回调时也需要传入参数，如果直接给父组件回调函数传入参数会覆盖掉子组件的参数。我们有三种解决办法。

正文

$event 方法

1
2
3
4
5
6
7
8
9
10
11
12
// 子组件中 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 位置没有限制，可以在第一位，也可以在最后一位。

局限性： 只适合子组件返回一个参数的情况，如果子组件有多个参数返回，只能接收到第一个参数

箭头函数法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 子组件中 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 方法

此方法类似于方法一，只不过是用 arguments 作为占位符,这里 argument 是一个数组

1
2
3
4
5
6
7
8
// 父组件接收参数
<Child @edit="editFun(arguments, scope.row)"></Child>

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

参考

本文摘抄至以下文章，在此表示诚挚感谢！

  1. Vue3自定义事件中，子组件有返回参数，父组件也有参数的处理方法