Pass parameter from child component to parent in Vue

When you work with Vue.js components you will have to pass paramets from child components to parant through events

We have the following Vue component

Vue.component('child', {
      template:` 

           
            Add Product 
        
      `,

      data: function () {
        return {
          fname: ''
        }
      }
   
    }) 

You have text field with v-model='fname'
Button has the click event and I am going to pass the fname to the function parentfunc in parent element

This is the root element with the child component. In this component you are calling the mainfunc function in Vue instance

Your Vue instabce will be

new Vue({
        el: "#root",
        methods :{
           mainfunc: function(value){
            alert("Text box value is " + value)
           }
         }
       })

You have the mainfunc function to receive one argument. When user clikc on the button this method will be called and parameter will be displayed

If you put all pieces together you can have following code