VueJS 2 - How To Pass Parameters Using $emit

I am working on a modal component using VueJS 2. Right now, it basically works -- I click on a button and the modal opens, etc. What I want to do now is create a unique name for

Solution 1:

Pass it as a parameter to $emit.

methods: {
    showModal(name) { this.bus.$emit('showModal', name); },
}

created() {
    this.bus.$on('showModal', (name) => alert(name));
}

Also, if you want to give the modal a name, you need to accept it as a prop in the modal component.

Vue.component("modal",{
    props:["name"],
    ...
})

Then I assume you will want to do something like,

if (name == this.name)
    //show the modal

Solution 2:

<!-- File name is dataTable.vue -->
<template>
  <div>
     <insertForm v-on:emitForm="close"></insertForm>
  </div>
</template>


<script>

import InsertForm from "./insertForm";

import Axios from "axios";

export default {
  components: {
    InsertForm
  },

  data: () => ({    
  }),

  methods: {
    
    close(res) {
      console.log('res = ', res);    
    }
  }
};
</script>

<!-- File name is insertForm.vue -->
<template>
  <div>
    <v-btn @click.native="sendPrameter">
      <v-icon>save</v-icon>
    </v-btn>
  </div>
</template>

<script>
export default {
  data: () => ({
   mesage:{
    msg:"Saved successfully",
    color:'red',
    status:1
  }
}), 

  methods: {
    sendPrameter: function() {      
      this.$emit("emitForm", this.mesage);
    }
  }
};
</script>

https://vuejs.org/v2/guide/components-custom-events.html