Skip to content Skip to sidebar Skip to footer

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><insertFormv-on:emitForm="close"></insertForm></div></template><script>importInsertFormfrom"./insertForm";

importAxiosfrom"axios";

exportdefault {
  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>exportdefault {
  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

Post a Comment for "Vuejs 2 - How To Pass Parameters Using $emit"