vue中子组件获取到父组件的width

在 Vue 中，子组件可以通过 `$parent` 属性来访问父组件，但是这不是一个推荐的做法，因为它会使子组件与父组件之间产生依赖性，使代码难以维护和重构。

更好的做法是使用 props 将父组件的 width 传递给子组件。这种方式可以让子组件更加独立，减少依赖性。在父组件中，可以定义一个 width 属性，并将其传递给子组件：

<template>
  <div>
    <child-component :width="parentWidth"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentWidth: 0
    }
  },
  mounted() {
    this.parentWidth = this.$el.offsetWidth
  }
}
</script>

在子组件中，可以通过 props 来接收父组件传递的 width：

<template>
  <div :style="{ width: width + 'px' }">
    <!-- 子组件内容 -->
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      required: true
    }
  }
}
</script>

这样，子组件就可以获取到父组件的 width，并且可以根据这个值来设置自己的样式。