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"