vue组件高度为页面剩余的高度

Vue组件动态设置为页面剩余高度的情况，通常用于创建响应式布局，特别是当内容区域需要填充整个视口的时候。这可以通过计算属性结合JavaScript来实现。下面是一个基本的示例：

1. 首先，在模板（template）中，你可以有一个div或者其他元素，你想让它适应剩下的高度，比如：

<div ref="content" :style="{ height: 'calc(100% - var(--header-height))' }"></div>

这里`ref`属性用于获取DOM元素的引用，`:style`绑定计算后的样式。

2. 然后，在组件的script部分，添加一个计算属性来计算剩余高度。假设我们已经有了一个全局变量`$headerHeight`存储头部高度：

export default {
  data() {
    return {
      headerHeight: window.getComputedStyle(document.querySelector('--header')).height // 获取头部高度
    };
  },
  computed: {
    contentHeight() {
      return 'calc(100% - ' + this.headerHeight + ')';
    }
  }
}

3. 如果头部高度会变化，可以考虑使用Vue的watch特性来监听这个变化。

注意：这个例子假设你已经使用了CSS变量（custom properties）来管理像`--header-height`这样的值。如果不需要CSS变量，直接替换`window.getComputedStyle`获取高度即可。