****vue中父子组件传值，祖父传值

需求:点击A组件的事件，触发一个事件，需要改变B组件中的showSideMenuFlag属性，但是由于showSideMenuFlag属性是经过C组件传递过去的，所以不能在B组件中直接改变此值，于是有下面的思路：

孙组件向父组件传值，父组件向爷组件传值，爷组件根据父组件传的值改变父组件的内容，

孙组件A,点击事件
methods: {
    changeLevelTwoMenu(idx) {
      ctx.$emit("listenToChildEvent", { flag: true });

     }
}
父组件B：接收A组件的方法把值取到，传给爷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)
    },


爷组件C：接收B组件的方法把值取到，再传给B组件
<C  :showSideMenuFlag="showSideMenuFlag"   v-on:showSideMenu="showSideMenu">

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

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

版权声明：本文为博主「CarryBest」的原创文章。