VUE中父组件动态修改子组件样式

  在项目中遇见多个父组件引用同一个子组件，但是根据不同的页面需要修改子组件的部分样式，我查了就以下几种方法：

在Vue中，通常父组件可以应用子组件并设置一些样式。但是，父组件不能直接修改子组件内部的样式，因为子组件的样式通常在其自身的模板或样式中定义。

父组件可以通过以下几种方式影响子组件的样式：

1. 传递 props： 父组件可以通过props将数据传递给子组件，子组件可以根据这些props来渲染不同的样式。

2. 使用 slot： 父组件可以通过slot向子组件传递内容，包括HTML和CSS类。子组件可以将这些内容插入到自身的模板中。

3. 使用全局样式或者CSS作用域： 如果您在Vue中使用了全局样式或者CSS作用域，那么这些样式也会应用到子组件中。

4. 使用CSS选择器： 父组件可以使用CSS选择器来选择子组件的DOM元素，并对其应用样式。但是，这种方式可能会导致样式耦合和不可维护性，因此不建议过度使用。

最好的办法传递props，代码如下：

1.在父组件冲传递:customStyle="customStyle"

<div style="position:relative;height:100%;" >
        <demand-detail :demandId="demandInfo.demandId" :closeFlowAuditDrawer="closeFlowAuditDrawer" :customStyle="customStyle"></demand-detail>
      </div>

2.定义customStyle变量，给子组件传递的样式，使用json格式，可以传入多个

 customStyle: {
        customStyle: {
        // padding: '16px 0 16px 84%',
        position: 'fixed',
        /* right: '13px', */
        bottom: '0',
        width: '53.6%',
        boxShadow: 'rgba(16, 144, 127, 0.15) 0px 0px 8px 0px',
        backgroundColor: 'white'
      },
      colWidth1:{
        width:'17.3%'
      },
      colWidth2:{
        width:'21.83%'
      },
      colWidth3:{
        width:'19.3%'
      },
      colWidth4:{
        width:'10.3%'
      },
      }

3.在子组件中定义接收类型

 props: {
     
      customStyle: {
      type: Object,
      default: () => ({})
    }
    },

4,在需要修改的地方使用动态样式

  <el-row class="submitBtn" :style="customStyle.customStyle">
           <!-- 审批 -->
           <el-col :span="5" :style="customStyle.colWidth1">
             <el-button type="text" @click="rejectApproval('audit')" >不通过</el-button>
             <el-button type="primary" @click="approveApproval('audit')">通过</el-button>
           </el-col>
           <!-- 结果确认 -->
           <el-col :span="5" :style="customStyle.colWidth1">
             <el-button type="text" @click="rejectApproval('audit')" >不通过</el-button>
             <el-button type="primary" @click="approveApproval('audit')">通过</el-button>
           </el-col>
           <!-- 业务确认 -->
           <el-col :span="5" :style="customStyle.colWidth1">
             <el-button type="text" @click="rejectApproval('business')">不通过</el-button>
             <el-button type="primary" @click="approveApproval('business')">通过</el-button>
           </el-col>
           <!-- 任务指派 -->
           <el-col :span="5" :style="customStyle.colWidth2">
             <el-button type="info" >无法溯源</el-button>
             <el-button type="primary" @click="assignTask(demandInfo.demandId)">任务指派</el-button>
           </el-col>
           <!-- 溯源 -->
           <el-col :span="5" :style="customStyle.colWidth3">
             <el-button type="info" @click="cannotTrace(demandInfo)"
              >无法溯源</el-button>
             <el-button type="primary" @click="sumTracing(demandInfo)">提 交</el-button>
           </el-col>

           <!-- 流程详情 -->
           <el-col :span="3" :style="customStyle.colWidth4">
             <el-button type="info" @click="openFlowDetailsDrawer(demandInfo,false,false)"
             >流程详情</el-button>
           </el-col>
         </el-row>