Passing Data from Child Components to Parent Components in Vue.js

Question

Looking for assistance with a component I have:

<BasicFilter></BasicFilter>

It contains a select element:

<select @change="$emit('onSortName', $event)">
<option value="asc"> A..Z</option><option value="desc"></select>

I am trying to pass the selected value to a function in the parent component:

onSortName(event) {
  if (event.target.value == 'desc') {
    do something
  }
}

Any suggestions on how to pass the event.target.value to the parent function?

Answer 1

Answer №1

When a child component emits an event with data intended for the parent:

<select @change="$emit('onSortName', data)">

The parent template can then listen for the event:

<BasicFilter @onSortName="onSortName"></BasicFilter>

A method can be used in the parent component to handle the event received from the child:

methods: {
  onSortName(val) {
    if (val == 'desc') {
      //do something
    }
  }
}

Answer 2

When a child component emits an event with data intended for the parent:

<select @change="$emit('onSortName', data)">

The parent template can then listen for the event:

<BasicFilter @onSortName="onSortName"></BasicFilter>

A method can be used in the parent component to handle the event received from the child:

methods: {
  onSortName(val) {
    if (val == 'desc') {
      //do something
    }
  }
}