First of all, the parent-child component is to introduce another vue file in one vue file, the vue file introduced is the child component, and the vue file introduced is the parent component.Variable values in child components cannot be invoked directly in parent components.Here's how values are passed between parent and child components.

First, let's talk about how parent components introduce child components.

1. Routing configuration: Routing nesting is achieved by using the children attribute, and the nested component relationship is parent-child component relationship

 {
      path: '/father',
      name: 'father',
      component: father,
      children: [
        {
          path: 'son',
          name: 'son',
          component: son
        }
      ] 
}

2. Component Pass Value - Parent Pass Value to Child Component

Step 1: When a parent component references a child component, it passes data that needs to be passed to the child component in the form of a property binding (v-bind:) to the child component itself for use by the child component.

Parent component: father.vue

<template>
  <div>
    <h1>Parent Component</h1>
    <router-view v-bind:fData="data1" :fMessage="data2"></router-view>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      data1: 'Parent Component Data data1',
      data2: 'Parent Component Data data2',
    };
  }
}
</script> 

Step 2: Define the data passed from the parent component in the props array

1. The data in all props in the component is passed to the child through the parent component

2. The data in props is read-only and cannot be reassigned

Step 3: Use the data defined in the props array in this subcomponent

Sub-component: son.vue

<template>
  <div>
    <h1>Subcomponents</h1>
    <p>Here is the data passed from the parent component</p>
    <p>First data:{{fData}}</p>
    <p>Second data:{{fMessage}}</p>
  </div>
</template>
 
<script>
export default {
  props: ['fData', 'fMessage'],
  data () {
    return {
 
    };
  }
}
</script> 

3. Component Pass Value - Parent Passes Method to Child Component

Step 1: Parent component passes method to child component, uses event binding mechanism v-on, customizes an event property, and passes it to child component

Parent component: father.vue

<template>
  <div>
    <h1>Parent Component</h1>
    <router-view @show="showFather"></router-view>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
 
    };
  },
  methods: {
    showFather (a, b) {
      console.log('The method that triggered the parent component' + '======' + a + '======' + b);
    }
  }
}
</script> 

Step 2: Define a method in the subcomponent where $emit triggers events passed by the parent component, events mounted on the current instance, and parameters can be passed

Step 3: Call the defined method in the subcomponent to trigger the method passed in by the parent component

Sub-component: son.vue

<template>
  <div>
    <h1>Subcomponents</h1>
    <Button type="primary" @click="sonClick">Trigger parent component method</Button>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
 
    };
  },
  methods: {
    sonClick () {
      this.$emit('show', 111, 222);
    }
  }
}
</script> 

4. Component Pass Value - A child component passes value to a parent component through an event call

In a child component, the data from the child component can be passed as a parameter to the parent component when the method $emit triggers the parent component to pass in

Parent component: father.vue

<template>
  <div>
    <h1>Parent Component</h1>
    <router-view @show="showFather"></router-view>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      fromSon1: '',
      fromSon2: ''
    };
  },
  methods: {
    showFather (a, b) {
      this.fromSon1 = a;
      this.fromSon2 = b;
      console.log('The method that triggered the parent component' + '======' + a + '======' + b);
    }
  }
}
</script> 

Sub-component: son.vue

<template>
  <div>
    <h1>Subcomponents</h1>
    <Button type="primary" @click="sonClick">Trigger parent component method</Button>
  </div>
</template>
 
<script>
export default {
  props: ['fData', 'fMessage'],
  data () {
    return {
      sonMessage: 'Subcomponent Data sonMessage',
      sonData: 'Subcomponent Data sonData'
    };
  },
  methods: {
    sonClick () {
      this.$emit('show', this.sonMessage, this.sonData);
    }
  }
}
</script> 

5. Value transfer between parent and child components

Parent component: father.vue

<template>
  <div>
    <h1>Parent Component</h1>
    <Button type="primary" @click="getData">get data</Button>
    <router-view v-bind:fData="data1" :fMessage="data2" @show="showFather"></router-view>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      data1: 'Parent Component Data data1',
      data2: 'Parent Component Data data2',
      fromSon1: '',
      fromSon2: ''
    };
  },
  methods: {
    showFather (a, b) {
      this.fromSon1 = a;
      this.fromSon2 = b;
      console.log('The method that triggered the parent component' + '======' + a + '======' + b);
    },
    getData () {
      console.log(this.fromSon1);
      console.log(this.fromSon2);
    }
  }
}
</script> 

Sub-component: son.vue

<template>
  <div>
    <h1>Subcomponents</h1>
    <p>Here is the data passed from the parent component</p>
    <p>First data:{{fData}}</p>
    <p>Second data:{{fMessage}}</p>
    <Button type="primary" @click="sonClick">Trigger parent component method</Button>
  </div>
</template>
 
<script>
export default {
  props: ['fData', 'fMessage'],
  data () {
    return {
      sonMessage: 'Subcomponent Data sonMessage',
      sonData: 'Subcomponent Data sonData'
    };
  },
  methods: {
    sonClick () {
      this.$emit('show', this.sonMessage, this.sonData);
    }
  }
}
</script>