Vue3如何为子组件触发的父组件方法添加额外参数？

你可以通过两种方式实现给updateQuestion传递额外参数，同时保留子组件传来的值：

方法一：使用$event接收子组件参数 #

在父组件模板中，用$event指代子组件$emit传递过来的值，再把它和额外参数一起传给目标方法：

<template>    
     <InputText @updateData="updateQuestion($event, 'text1', 'text2')"/>
</template>

<script>
export default {
  name: "Parent",
  methods: {
    updateQuestion(val, param1, param2) {
      console.log(val) // 子组件传来的输入框值
      console.log(param1) // 'text1'
      console.log(param2) // 'text2'
    }
  }
}
</script>

方法二：使用箭头函数包裹 #

用箭头函数直接接收子组件的参数，再调用方法并传入额外参数，这种写法更直观，尤其适合子组件传递多个参数的场景：

<template>    
     <InputText @updateData="(val) => updateQuestion(val, 'text1', 'text2')"/>
</template>

<script>
export default {
  name: "Parent",
  methods: {
    updateQuestion(val, param1, param2) {
      console.log(val) // 子组件传来的输入框值
      console.log(param1) // 'text1'
      console.log(param2) // 'text2'
    }
  }
}
</script>

两种方式都能满足需求，箭头函数的写法可读性更强，推荐使用。

内容的提问来源于stack exchange，提问作者Mariusz