Home > OS >  Vue 3 extra params to emitted method
Vue 3 extra params to emitted method

Time:09-06

I have two components "Parent", "Child"

Child (InputText):

<template>
     <input type="text" @input="$emit('updateData', $event.target.value)">
</template>

Parent:

<template>    
     <InputText @updateData="updateQuestion"/>
</template>

<script>
export default {
  name: "Parent",
  methods: {
    updateQuestion(val, param1, param2) {
      console.log(val) //child event.target.val
      console.log(param1) // param1 value passed in Parent template
      console.log(param2) // param2 value passed in Parent template
    }
  }
</script>

How can I add extra params to updateQuestion for example I need something like this:

<InputText @updateData="updateQuestion(<child params>, 'text1', 'text2)"/>

CodePudding user response:

An event is available in component template as local $event value:

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

CodePudding user response:

Just use an inline handler :

<InputText @updateData="(childVal)=>updateQuestion(childVal, 'text1', 'text2')"/>
  • Related