vue中怎么监听组件的宽高改变

在 Vue 中，你可以使用 `watch` 来监听组件的宽高改变。

首先，在组件的 `data` 中定义一个用于保存宽高的属性，例如 `componentWidth` 和 `componentHeight`。

然后，使用 `mounted` 钩子函数来获取组件的初始宽高，并将它们保存到相应的属性中。

接下来，在组件中使用 `watch` 来监听组件的宽高改变。你可以通过 `$refs` 来获取组件的 DOM 元素，然后使用 DOM API 中的方法来获取宽高，并更新保存宽高的属性。

以下是一个示例代码：

<template>
  <div ref="component" class="component">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentWidth: 0,
      componentHeight: 0
    };
  },
  mounted() {
    this.getComponentSize();
  },
  methods: {
    getComponentSize() {
      const component = this.$refs.component;
      this.componentWidth = component.offsetWidth;
      this.componentHeight = component.offsetHeight;
    }
  },
  watch: {
    componentWidth(newWidth) {
      // 宽度发生改变时的处理逻辑
      console.log('宽度改变为', newWidth);
    },
    componentHeight(newHeight) {
      // 高度发生改变时的处理逻辑
      console.log('高度改变为', newHeight);
    }
  }
};
</script>

<style>
.component {
  width: 200px;
  height: 200px;
  background-color: lightgray;
}
</style>

在上面的例子中，我们通过 `$refs` 来获取组件的 DOM 元素，并在 `mounted` 钩子函数中初始化宽高。然后，通过使用 `watch` 来监听 `componentWidth` 和 `componentHeight` 的变化，并在这些属性发生改变时执行相应的处理逻辑。

当组件的宽度或高度发生改变时，watch 中定义的处理逻辑会被触发。

希望这个例子能帮到你！如果还有其他问题，请随时提问。