在子组件中获取到最大的父组件的宽度

两种方法

1，，// 在子组件里通过$parent获取最大的父组件宽度
mounted() {
  const parentWidth = this.$parent.$el.clientWidth;
  console.log("父组件宽度：", parentWidth);
}


2，，// 通过$parent获取最大的父组件宽度的另一种写法
mounted() {
  const parentWidth = this.$parent.$el.offsetWidth;
  console.log("父组件宽度：", parentWidth);
}

可以实时获取到最大父组件的宽度 ，吧值放到watch监听里边就可以

// 子组件中
export default {
  mounted() {
    let maxWidth = this.$parent.$el.clientWidth; // 获取父组件的宽度
    this.$nextTick(() => {
      window.addEventListener('resize', () => {
        maxWidth = this.$parent.$el.clientWidth; // 实时监听父组件宽度变化
      });
    });
  }
}

监听的写法

watch: {
  // 监听一个属性
  propName: {
    handler(newValue, oldValue) {
      // 处理属性变化时的逻辑
    },
    immediate: true, // 是否立即执行handler
    deep: true // 是否深度监听
  },
  // 监听多个属性
  'obj.prop': [
    {
      handler(newValue, oldValue) {
        // 处理属性变化时的逻辑
      },
      immediate: true, // 是否立即执行handler
      deep: true // 是否深度监听
    },
    {
      handler(newValue, oldValue) {
        // 处理属性变化时的逻辑
      }
    }
  ]
}