Passing data from Parent Vue to Child Vue and Viceversa

This article explains about step by step process of passing data from Parent vue to Child Vue and also pass data from Child Vue to Parent Vue. Let us understand this by an example.

Let us understand this passing data between components using the below example.

Scenario & Explanation: I have created two components ,one is product component and another is customer component.Here i have placed product elements in parent component i.e app.vue and customer component in child component.
The parent component(i.e product) has 2 elements.The first element is "Send product to customer" label and textbox and second element is "Received amount for product:"
Similarly the child component has 2 elements.The first element is "Received Product" label and "SendPrice" button.
As soon as the user enters product in parent component, the same will be send to the child component(customer).
similarly when user hits the sendprice button,the price will be reflected in parent component(product)

App.vue

       <template>
        <div id="app">
         <h2>Product Component<h2>
    Send Product to Customer :  <input type="text" v-model="prodname"><br>
    Received Amount for Product:   {{customerprice}}    
    <br><br> <br> <br>
    <h2>Customer Component<h2>
    <Customer catchprod="prodname" @price="getprice">
    <div>
    <template>
  <script>
     import Customer from "./components/Customer.vue";
export default {
  name: "App",
  data(){
   return {
        prodname:'',
        customerprice:0,
        products:[],
   } 
  },
  components: {    
    Customer,
  },
  methods:{
    getprice(price)
    {
      this.customerprice=price;
    },
    
  },
};
  <script>

Customer.vue

 <template>
 <div>
 Received Product: {{catchprod}}<br>
 <button @click="sendprice()">SendPrice<button>
 <div>
 <template>
 <script>
export default {
  name: "customer",
  props: {   
    catchprod:String,
    price:Number,   
    },
                methods:
                    {
                        sendprice()
                        {
                            this.price=200;
                            this.$emit("price",this.price);
                            console.log("price" + this.price);
                        }
                    }
    };
            <script>