碰到很奇怪的屏幕宽高自适应问题：

高度设置在组件外层不起作用，组件间横向三分这个视图，百分比设置

<template>
  <div class="wrap">
    <div class="main-content">
      <left :style="'height:'+cheight" />
      <cen :style="'height:'+cheight" />
      <right :style="'height:'+cheight" />
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import left from "./left.vue";
import center from "./center.vue";
import right from "./right.vue";
export default {
  name: "home",
  components: {
    left: left,
    cen: center,
    right: right
  },
  data() {
    return {
      screenWidth: document.body.clientWidth,
      screenHeight: document.body.clientHeight,
      cheight: document.body.clientHeight - 30 + "px"
    };
  },
  created() {},
  watch: {
    screenWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          // 打印screenWidth变化的值
          console.log(that.screenWidth);
          that.timer = false;
        }, 400);
      }
    },
    screenHeight(val) {
      if (!this.timer) {
        debugger;
        this.screenHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          console.log(that.screenHeight);
          that.timer = false;
        }, 400);
      }
    }
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        window.screenHeight = document.body.clientHeight;
        that.screenWidth = window.screenWidth;
        that.screenHeight = window.screenHeight;
        var l = document.querySelector(".left");
        var c = document.querySelector(".center");
        var r = document.querySelector(".right");
        l.style.height = that.screenHeight - 30 + "px";
        c.style.height = l.style.height;
        r.style.height = l.style.height;
      })();
    };
  },
  methods: {}
};
</script>