vue3 父组件给子组件传递样式 动态修改子组件的宽度

为了实现父组件给子组件传递样式并动态修改子组件的宽度，可以按照以下步骤进行操作：

1.在父组件中定义一个data属性，用于存储子组件的宽度值，例如：

data() {
  return {
    childWidth: '100px'
  }
}

2.在父组件中定义一个方法，用于接收子组件传递过来的样式值，并将其赋值给data属性中的childWidth，例如：

methods: {
  setChildWidth(width) {
    this.childWidth = width;
  }
}

3.在父组件中引入子组件，并将data属性中的childWidth作为props传递给子组件，例如：

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

4.在子组件中定义一个props属性，用于接收父组件传递过来的样式值，并将其应用到子组件的样式中，例如：

props: {
  width: {
    type: String,
    default: '100px'
  }
},
computed: {
  childStyle() {
    return {
      width: this.width
    }
  }
}

5.在子组件的模板中使用上一步中定义的computed属性，将样式应用到子组件中，例如：

<template>
  <div :style="childStyle"></div>
</template>

这样就可以实现父组件给子组件传递样式并动态修改子组件的宽度了。