vue 中 组件封装 一个div 多个style对象 怎么写

可以使用对象合并语法来实现一个 div 组件多个 style 对象的封装。

具体实现步骤如下：

1. 定义一个组件，使用 props 接收 style 对象数组。

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

<script>
export default {
  props: {
    styles: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    mergedStyle() {
      return Object.assign({}, ...this.styles);
    },
  },
};
</script>

2. 在组件中定义一个 computed 属性 mergedStyle ，用来将传入的多个 style 对象进行合并。

3. 在 mergedStyle 中使用 Object.assign() 方法将所有的 style 对象合并成一个对象，最终返回合并后的结果。

4. 在模板中使用 :style 绑定 mergedStyle 属性即可。

使用时，可以将多个 style 对象封装到一个数组中，然后通过 props 传递给组件。

<template>
  <div>
    <my-div :styles="[style1, style2]"></my-div>
  </div>
</template>

<script>
import MyDiv from './MyDiv.vue';

export default {
  components: {
    MyDiv,
  },
  data() {
    return {
      style1: {
        background: 'red',
        color: 'white',
      },
      style2: {
        fontSize: '16px',
        lineHeight: '1.5',
      },
    };
  },
};
</script>

这样，就可以将多个 style 对象传递给组件，组件内部会将它们合并成一个对象并应用到 div 元素上。