Create three Vue components - index.vue (parent component), son1.vue (child component), son2.vue (child component)

Set the path of the parent component in the router file (the child component does not need to set the route);
Page conversions between parent and child components are not routed
The parent component passes the data to the child component for use. The child component triggers the custom event of the parent component when it encounters the business logic operation.

this.$parent

This method does not belong to data transmission but an active search. The parent component does not actively transfer data to the child component, but the child component obtains the data of the parent component through the association relationship with the parent component.
Although this method can obtain the data in the parent component, it is not recommended because vue advocates one-way data flow. Only the data sub components handed over by the parent component to the child component have permission to use, and the child component is not allowed to obtain the data of the parent component for use without permission. In the relationship between father and son, the neutron should be in a passive relationship.

Parent component content:

<template>
  <div class="index">
    <div v-if='group_type==1'>
        <span>I am the parent component</span>
        <button @click='group_type=4'>Go to the eldest son's house</button>
        <button  @click='group_type=5'>Go to my little son's house</button>
    </div>
    <son1 v-if="group_type==4" :goodsId='goods_id' @group_type="get_type"></son1>
    <son2 v-if="group_type==5" :type='goodsName' @group_type="get_type"></son2>
  </div>
</template>
<script>
import son1 from './son1';
import son2 from './son2';
    export default{
        data() {
            return {
                group_type:1,
                goods_id:'Male goose,3 year',
                goodsName:'Zhejiang white goose',
            }
        },
        //Introduce subcomponents
        components: {
            son1,
            son2,
        },
        methods: {
            //The function executed after the child component returns the parent component;
            get_type(i){
              this.group_type = i;
            }
        },

    }
</script>
<style>
    button{
        padding: 10px 15px;
        background: rgb(109, 177, 233);
        color: #fff;
        font-size: 14px;
        border: solid 1px;
        border-radius:6px; 
    }
</style>

Content of subcomponent son1:

<template>
<div class="son1">
    <span>I'm the eldest son----{{name}}</span>
    <button @click='_back()'>Return</button>
</div> 
</template>
<script>
    export default{
        name :'son1',
        data() {
            return {
                name:''
            }
        },
        // props is used to receive the property value from the parent component
        props: {
            goodsId: String  //Parameter types can be string, number, Boolean, object, array, function
        },
        created() {
            this.name = this.goodsId;
            console.log(this.$parent); //Get all the attribute methods of the parent component (not recommended);
        },
        methods: {
            _back(){
            //The subcomponent uses $emit to issue custom events
                this.$emit("group_type", 1);
            }
        }
    }
</script>

Content of subcomponent son2:

<template>
<div class="son2">
    <span>I'm the youngest son----{{name}}</span>
    <button @click='_back()'>Return</button>
</div>

</template>
<script>
    export default{
        name :'son2',
        data() {
            return {
                name:'',
            }
        },
        props: {
            type: String          
        },
        created() {
            this.name = this.type;
        },
        methods: {
            _back(){
               this.$emit("group_type", 1);
            }
        }
    }
</script>