Emitting events from vue-router

Question

I have two components: MyItem.vue and ChangeItem.vue. I'm trying to emit an event in ChangeItem.vue and component and catch it in MyItem.vue component. But is not working.

MyItem.vue

<template>
    <v-card>
        <p>Hello</p>
    </v-card>
     <v-card>
        <router-view name="areas.change" v-on:onchangeitem="test"></router-view>
     </v-card>
</template>

<script>
  export default {
    data(){
        return {
          item: [
        }
    },
    methods: {
        test: function() {
            console.log("my event")
        },
        
    },
  }
</script>

ChangeItem.vue

<template>
    <v-row align="center" justify="center" class="pa-15">
        <button @click="onClickBtnValidate">click</button>
    </v-row>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods: {
      onClickBtnValidate: function() {
          this.$router.app.$emit('onchangeitem')
      }
  },
  
};
</script>

Answer 1

First of all, to emit the event is enough with

this.$emit('onchangeitem')

Anyways, why don't you try calling your ChangeItem component directly from MyItem component, I think that is your main problem here, if you are going to try this, remember to register the component inside the components section of the vue object.