vue子组件监听父组件容器宽高

在Vue.js中，子组件想要监听父组件容器的宽高变化，通常会通过事件总线（Event Bus）或者是自定义事件的方式来进行。这里简单介绍两种常见的做法：

1. **使用Vuex** (状态管理库)：
如果你已经在项目中使用了Vuex，可以在父组件中创建store并保存容器尺寸，然后通过`$emit`触发一个事件，在子组件里订阅这个事件来获取新的值。

// 父组件
import { mapState } from 'vuex'
export default {
  computed: {
    containerSize() {
      // 获取或计算容器大小
      return { width: ..., height: ... };
    }
  },
  methods: {
    updateSize() {
      this.$store.commit('updateContainerSize', this.containerSize);
    }
  }
}

// 子组件
import { mapActions } from 'vuex';
export default {
  created() {
    this.$on('containerSizeUpdated', this.handleContainerSizeUpdate);
  },
  destroyed() {
    this.$off('containerSizeUpdated', this.handleContainerSizeUpdate);
  },
  methods: {
    handleContainerSizeUpdate(size) {
      // 更新子组件处理的尺寸信息
    }
  }
}

2. **使用自定义事件Bus**：
创建一个全局的Vue实例或者一个专门的子组件来做中间件，当父组件的宽高改变时，向这个中间件发送事件，子组件再监听这个事件。

// eventBus.js 或者 globalEventBus.vue
const bus = new Vue();

// 父组件
export default {
  mounted() {
    bus.$on('parentContainerResize', ({width, height}) => {
      this.containerWidth = width;
      this.containerHeight = height;
    });
  },
  methods: {
    onResized(width, height) {
      bus.$emit('parentContainerResize', {width, height});
    }
  }
}

// 子组件
export default {
  created() {
    bus.$on('parentContainerResize', ({width, height}) => {
      this.containerWidth = width;
      this.containerHeight = height;
    });
  },
  methods: {
    // ...
  }
}

// 调用父组件方法改变大小
this.onResized(newWidth, newHeight);