First we will create the component name child which will have ta button with click event
|
1 2 3 4 5 6 7 |
Vue.component('child', { template:` <div> <button @click="$emit('parentfunc')" > Add Product </button> </div> `, }) |
Name of the above compoment is child
You have button inside the child element and it has @click="$emit('parentfunc')" which is used to call the funcation name parentfunc in the parent element of this child component
We will just have alert method to show some text as shown in below
|
1 2 3 4 5 6 |
<div id='root'> <div > <child @parentfunc="alert('I am parent')" > </child> </div> </div> |
Now when you click on the buttom it will call the function parentfunc in the parent element
This is the complete code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>Vue.js $emit example</title> </head> <body> <div id='root'> <div > <child @parentfunc="alert('I am parent')" > </child> </div> </div> </body> <script> Vue.component('child', { template:` <div> <button id="btn" @click="$emit('parentfunc')" > Add Product </button> </div> `, }) new Vue({ el: "#root", methods :{ hello: function(){ alert("Hello from Vue instalce") } } }) </script> </html> |