美文网首页
****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