美文网首页
****vue中父子组件传值,祖父传值

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

作者: 泪滴在琴上 | 来源:发表于2022-04-08 11:00 被阅读0次
需求:点击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;
    },
————————————————
版权声明:本文为CSDN博主「CarryBest」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/CarryBest/article/details/88974677

相关文章

网友评论

      本文标题:****vue中父子组件传值,祖父传值

      本文链接:https://www.haomeiwen.com/subject/etdssrtx.html