Parent-child components pass by value in vue, grandfather pass by value

Requirement: Click on the event of component A to trigger an event. You need to change the showSideMenuFlag property in component B. However, because the showSideMenuFlag property is passed through component C, this value cannot be changed directly in component B. So the following ideas are given:

The grandchild component passes the value to the parent component, the parent component passes the value to the grandfather component, and the grandfather component changes the content of the parent component according to the value passed by the parent component.

Sun component A, click event
methods: {     changeLevelTwoMenu(idx) {       ctx.$emit(" listenToChildEvent ", {flag: true });

     }
}
Parent component B: The method of receiving component A gets the value and passes it to component C
  <A :navList="navList" v- on:listenToChildEvent ="showSideMenu"></A>

<el-aside :width="asideWidth" class="menu-side" v-show="showSideMenuFlag">

 props: {
    showSideMenuFlag: {
      type: Boolean,
      default: true
    }
  },

 methods: {
    showSideMenu(flag) {
      this.$emit("showSideMenu", flag)
    },

Component C: The method of receiving component B gets the value, and then passes it to component B
<C :showSideMenuFlag="showSideMenuFlag" v-on:showSideMenu="showSideMenu">

data() {
    return {
      showSideMenuFlag:false,
    };
  },

methods: {
    showSideMenu(flag){
     this.showSideMenuFlag = flag;
    },

-------------------------Dividing line----------------------- -------------------------------------------------- ------------------------------------------------

------------------Dividing line------------------------------ -------------------------------------------------- ----
Because of the separation of the front and back ends of vue, if there are any errors, please feel free to raise them~