Value Transfer and Method Transfer of Parent Child Components in Vue

1. Parent component passes value to child component in Vue

v-bind is used to pass values to subcomponents, and props is used to accept values in subcomponents

<div id="app">
  <father></father>
</div>
<template id="father">
  <div>
    <!-- Attention points :  Components can use their own data -->
    <p>{{name}}</p>
    <p>{{age}}</p>
    <!-- Where the parent component's name Pass parentname Passed to a child component -->
    <son :parentname="name" :abc="age"></son>
  </div>
</template>
<template id="son">
  <div>
    <!-- Through here parentname The data passed by the parent component is used -->
    <p>{{parentname}}</p>
    <p>{{abc}}</p>
  </div>
</template>
<script>
  //  Parent component 
  Vue.component("father", {
    template: "#father",
    data: function(){
     return {
       name: "wqd",
       age: 21
     }
    },
    //  Subcomponent 
    components: {
      "son": {
        template: "#son",
        // Through here parentname Received the data passed by the parent component 
        props: ["parentname", "abc"]
      }
    }
  });
  //  This is where MVVM In View Model
  let vue = new Vue({
    el: '#app',
    //  This is where MVVM In Model
    data: {
    },
  });
</script>

2. Parent component to child component passing method in Vue

The parent component uses v-on to pass values and the child component this. $emit to receive

<div id="app">
  <father></father>
</div>
<template id="father">
  <div>
    <button @click="say"> I'm the button </button>
    <!-- Through here parentsay Parent component's say Method is passed to a child component -->
    <son @parentsay="say"></son>
  </div>
</template>
<template id="son">
  <div>
    <button @click="sonFn"> I'm the button </button>
  </div>
</template>
<script>
  //  Parent component 
  Vue.component("father", {
    template: "#father",
    methods: {
      say(){
        console.log("helloworld")
      }
    },
    //  Subcomponent 
    components: {
      "son": {
        template: "#son",
        /*
         Attention points :  Unlike passing data ,  If you are passing a method ,  Then you don't need to receive it in the subcomponent, but you need to communicate it in the custom method of the subcomponent this.$emit(" Customize the received name ") To trigger the method passed by the parent component 
        */
        // props: ["parentsay"]
        methods: {
          sonFn(){
            this.$emit("parentsay");
          }
        }
      }
    }
  });
  //  This is where MVVM In View Model
  let vue = new Vue({
    el: '#app',
    //  This is where MVVM In Model
    data: {
    },
  });
</script>

3. Vue subcomponent passes value to parent component

The first parameter in this. $emit is the method passed by the parent component, and the second parameter is the value passed to the parent component

<div id="app">
  <father></father>
</div>
<template id="father">
  <div>
    <button @click="say"> I'm the button </button>
    <!-- Through here parentsay Parent component's say Method is passed to a child component -->
    <son @parentsay="say"></son>
  </div>
</template>
<template id="son">
  <div>
    <button @click="sonFn"> I'm the button </button>
  </div>
</template>
<script>
  //  Parent component 
  Vue.component("father", {
    template: "#father",
    methods: {
      //data Used to accept values passed by subcomponents 
      say(data){
        console.log(data);
      }
    },
    //  Subcomponent 
    components: {
      "son": {
        template: "#son",
        methods: {
          sonFn(){
            //  No. 1 1 Parameters :  The name of the function to call 
            //  Subsequent parameters :  Parameters passed to the called function 
            this.$emit("parentsay", " How do you do ");
          }
        }
      }
    }
  });
  //  This is where MVVM In View Model
  let vue = new Vue({
    el: '#app',
    //  This is where MVVM In Model
    data: {
    },
    
  });
</script>