vue 在子组件里渲染父组件的传过去的di样式

在Vue中，可以通过使用props属性传递数据和样式给子组件，然后在子组件中使用这些属性来渲染父组件传递过来的div样式。

在父组件中，通过使用v-bind指令，将样式传递给子组件：

<template>
  <div>
    <child-component :divStyle="divStyle"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      divStyle: {
        backgroundColor: 'red',
        color: 'white'
      }
    }
  }
}
</script>

在子组件中，可以使用props属性来接收父组件传递的样式，并将其应用到子组件的div元素中：

<template>
  <div :style="divStyle">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    divStyle: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

在这个例子中，子组件通过props属性接收父组件传递的divStyle对象，并将其通过v-bind指令应用到子组件的div元素上。

注意，在子组件中使用v-bind指令绑定样式时，需要使用冒号（:）或v-bind指令，以便将父组件传递的数据绑定到子组件中。