vue2子组件组件获取父组件的宽高

在Vue.js 2中，子组件可以通过props属性获取父组件的宽高。下面是一种常见的实现方式：

// 父组件
<template>
  <div ref="parent" class="parent">
    <ChildComponent :parentWidth="parentWidth" :parentHeight="parentHeight" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentWidth: 0,
      parentHeight: 0
    };
  },
  mounted() {
    this.getParentSize();
    window.addEventListener('resize', this.getParentSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.getParentSize);
  },
  methods: {
    getParentSize() {
      this.parentWidth = this.$refs.parent.offsetWidth;
      this.parentHeight = this.$refs.parent.offsetHeight;
    }
  }
}
</script>

// 子组件
<template>
  <div class="child">
    Parent Width: {{ parentWidth }}px<br>
    Parent Height: {{ parentHeight }}px
  </div>
</template>

<script>
export default {
  props: {
    parentWidth: {
      type: Number,
      required: true
    },
    parentHeight: {
      type: Number,
      required: true
    }
  }
}
</script>

在上述示例中，父组件使用`ref`属性给父元素添加一个引用，然后在`mounted`钩子函数中，通过`$refs`来获取父元素的宽度和高度，并将其作为props传递给子组件。子组件通过props接收父组件传递的宽度和高度，并在模板中显示出来。

需要注意的是，为了在窗口大小发生变化时更新父组件的宽高，我们使用了`resize`事件和相应的事件处理函数。这样，无论窗口大小如何改变，子组件都能实时获取到父组件的宽高值。