SoFunction
Updated on 2025-04-06

$emit passes multiple parameters (arguments and $event) in vue

Preface

When using $emit to pass data from child component to parent component, there are mainly three types of situations

1. Only child components pass values ​​(single, multiple)

Writing method 1: (free style)

// child component, trigger event in child componentthis.$emit('handleFather', 'Subparameter 1','Subparameter 2','Subparameter 3')
// father component, refer to child components in parent component<child @handleFather="handleFather"></child>
<script>
export default {
   components: {
    child,
   }
   methods: {
     handleFather(param1,param2,param3) {
         (param) // 
     }
   }
 }
 </script>

Analysis:

  • Only child components pass values;
  • Note that @reference function does not need to be "bracketed";
  • The child component passes the value and the parameters of the parent component method are one by one.

Writing method 2: (arguments writing method)

// child component, triggers events in child components and passes multiple parametersthis.$emit('handleFather', param1, param2,)
//father component, refer to child components in parent component<child @handleFather="handleFather(arguments)"></child>
<script>
  export default {
    components: {
     child,
    }
    methods: {
      handleFather(param) {
          (param[0]) //Get the value of param1          (param[1]) //Get the value of param2      }
    }
  }
</script>

Analysis:

  • Only child components pass values;
  • Note that the @ reference function adds the "arguments" value;
  • Print out the array form of the values ​​passed by the child component.

2. The child component passes the value, and the parent component also passes the value

Writing method one:

// child component, trigger event in child componentthis.$emit('handleFather', 'Subparameter object')
//father component, refer to child components in parent component<child @handleFather="handleFather($event, fatherParam)"></child>
 
<script>
 export default {
   components: {
    child,
   }
   methods: {
     handleFather(childObj, fatherParam) {
         (childObj) // Print child component parameters (object)         (fatherParam) // Parent component parameters     }
   }
 }
</script>

Writing method two:

// child component, triggers events in child components and passes multiple parametersthis.$emit('handleFather', param1, param2,)
//father component, refer to child components in parent component<child @handleFather="handleFather(arguments, fatherParam)"></child>

<script>
 export default {
   components: {
    child,
   }
   methods: {
     handleFather(childParam, fatherParam) {
         (childParam) //Get arguments array parameters         (fatherParam) //Get fatherParam     }
   }
 }
</script>

Summarize:

  • Only child components pass parameters, @ call method does not use "brackets"
  • Special use of "arguments" and "$event",
  • arguments Get an array of sub-parameters
  • $event Gets a custom object to satisfy the passing of multiple parameters

This is the article about $emit passing multiple parameters (arguments and $event) in vue. For more related content to pass multiple parameters for $emit, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!