vue3在子组件中获取父组件的高宽

在Vue3中，为了在子组件中获取父组件的尺寸（高度和宽度），你需要使用`$parent`或者`this.$refs`结合`window.getComputedStyle`或者直接从props中传递这些值。以下是几种常见的方法：

1. **使用$parent和计算属性**:
如果父组件将尺寸作为prop传递给子组件，你可以这样做：

   // 父组件
   <child-component :width="parentWidth" :height="parentHeight"></child-component>

   // 子组件
   computed: {
       parentSize() {
           return {
               width: this.$parent.parentWidth,
               height: this.$parent.parentHeight
           };
       }
   },
   mounted() {
       console.log(this.parentSize); // 获取到父组件的尺寸
   }

2. **使用$refs**
如果尺寸是以ref的形式存在，可以在子组件中访问：

   // 父组件
   <div ref="parentElement">...</div>
   <child-component @mounted="initChildWidthHeight"></child-component>

   // 子组件
   methods: {
      initChildWidthHeight() {
         let parentEl = this.$refs.parentElement;
         if (parentEl) {
            this.parentWidth = parseInt(getComputedStyle(parentEl).width);
         }
      }
   }

3. **使用事件 bus**
如果不想暴露prop，可以借助Vue的事件总线机制来传递：

- 创建一个事件总线：

     import Vue from 'vue';
     export const bus = new Vue();

- 父组件发送尺寸：

     <child-component @parentDimensions="handleParentDimensions"></child-component>

- 子组件监听事件：

     methods: {
        handleParentDimensions({ width, height }) {
          this.width = width;
          this.height = height;
        }
     }

注意，在实际应用中，你应该避免在非响应式环境下获取DOM元素的尺寸，因为这可能会导致UI渲染延迟。如果父组件的尺寸需要动态调整，记得在相应事件触发时同步更新子组件的尺寸。