vue子组件如何动态传数据给父组件？

背景：一个拖拽的页面，左侧是被拖动的模块，右侧是放置，模块的容器，每个模块是一个子组件，在容器这个父组件里循环展示，
需求：由于每个模块要设置不同宽高，所以我在每个子组件里设置了宽高然后使用this.$emit修改父组件的值，我现在设置了其中两个模块的宽高
问题：但是现在没有进行动态的更改，好像默认是B的宽高，在第一次拖动A时，要拖动两遍才是我设置A的宽高，然后无论拖动A还是B都是对的宽高；然而无论第几次在拖动B时，就是B的正确宽高
父组件

 "ViewPC" :col-num="12" :row-height="62" :is-resizable="false" :is-draggable="true"
            :responsive="true" :vertical-compact="true" :use-css-transforms="true" ref="gridlayout">
            for="(item, index) in ViewPC" :key="index" :x="item.x" :y="item.y" :w="item.w" :h="item.h"
              :i="item.i" @resize="resizeEvent" @move="moveEvent" @resized="resizedEvent" @moved="movedEvent">
              
if="index > 0" :key="index" :data-index="index"
                :class="{item: true, active: currentIndex === index }" @click="selectType(index)" style="height: 100%;">
                
                
                class="span-error" @click="deleteItem($event, index)">
                  class="el-icon-delete del-css" />
              

            
          
msg: {
          w: 1,
          h: 1
        },
let mouseXY = {
    "x": null,
    "y": null
  };
  let DragPos = {
    "x": null,
    "y": null,
    "w": null,
    "h":null,
    "i": null
  };
drag: function(e) {
        this.type = e.target.dataset.type
        let parentRect = document.getElementById('content').getBoundingClientRect();
        let mouseInGrid = false;
        if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (
            mouseXY.y < parentRect.bottom))) {
          mouseInGrid = true;
        }
        if (mouseInGrid === true && (this.ViewPC.findIndex(item => item.i === 'drop')) === -1) {
          console.log('s.ViewPC.push')
          this.ViewPC.push({
            x: (this.ViewPC.length * 2) % (this.colNum || 12),
            y: this.ViewPC.length + (this.colNum || 12),
            w: this.msg.w,
            h: this.msg.h,
            type: this.type,
            options: {},
            data: [],
            status: 1,
            i: 'drop',
          });
        }
        let index = this.ViewPC.findIndex(item => item.i === 'drop');
        if (index !== -1) {
          console.log('!== -1')
          try {
            console.log('none')
            this.$refs.gridlayout.$children[this.ViewPC.length].$refs.item.style.display = "none";
          } catch {}
          let el = this.$refs.gridlayout.$children[index];
          el.dragging = {
            "top": mouseXY.y - parentRect.top,
            "left": mouseXY.x - parentRect.left
          };
          let new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left);
          if (mouseInGrid === true) {
            this.$refs.gridlayout.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, this.msg.w, this.msg.h);
            DragPos.i = String(index);
            DragPos.x = this.ViewPC[index].x;
            DragPos.y = this.ViewPC[index].y;
            DragPos.w = this.ViewPC[index].w;
            DragPos.h = this.ViewPC[index].h;
          }
          if (mouseInGrid === false) {
            this.$refs.gridlayout.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, this.msg.w, this.msg.h);
            this.ViewPC = this.ViewPC.filter(obj => obj.i !== 'drop');
          }
        }
      },
      dragend: function(e) {
        let parentRect = document.getElementById('content').getBoundingClientRect();
        let mouseInGrid = false;
        if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (
            mouseXY.y < parentRect.bottom))) {
          mouseInGrid = true;
        }
        if (mouseInGrid === true) {
          this.$refs.gridlayout.dragEvent('dragend', 'drop', DragPos.x, DragPos.y, DragPos.w, DragPos.h);
          this.ViewPC = this.ViewPC.filter(obj => obj.i !== 'drop');
这里新增模块
          this.ViewPC.push({
            x: DragPos.x,
            y: DragPos.y,
            w: DragPos.w,
            h: DragPos.h,
            i: Number(DragPos.i),
            type: this.type,
            options: {},
            data: [],
            status: 1,
          });
          try {
            this.$refs.gridlayout.$children[this.ViewPC.length].$refs.item.style.display = "block";
            console.log('block',this.$refs.gridlayout)
          } catch {
          }
          this.isPush = false
          this.type = null
           DragPos.w=null
           DragPos.h=null
           console.log('DragPos', DragPos)
        }
      },

export default {
    name: 'Banner',
    props: ['data', 'msg'],
    data(){
      return{
      }
    },
    watch:{
      msg(newVal, oldVal) {
        console.log('banner',newVal, oldVal)
      if(JSON.stringify(newVal) !== JSON.stringify(oldVal))
      this.$emit("update:getmsg", newVal);
      },
    },
 mounted() {
   const that=this
      that.msg['w']=4.2
      that.msg['h']=6
    }
  }

export default {
  name: 'Layout',
  props: ['data', 'msg'],
     data(){
       return{
       }
     },
     watch:{
       msg(newVal, oldVal) {
         console.log('Layout',newVal, oldVal)
       if(JSON.stringify(newVal) !== JSON.stringify(oldVal))
       this.$emit("update:getmsg", newVal);
       },
     },
  mounted() {
    const that=this
       that.msg['w']=12
       that.msg['h']=3
     }
}

你看你的方法有触发嘛？没见你写语法糖

再有我这边看你用到了 v-if 注意一下父子组件的渲染顺序，在你做数据传递的时候不排除你的子组件并没有渲染

• 你看下这篇博客吧, 应该有用👉 ：vue 父子组件传值 子组件修改父组件值的解决办法