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

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

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

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

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

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

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

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

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

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

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, 在需要修改的地方使用动态样式

  
           
           
              不通过 
              通过 
           
           
           
              不通过 
              通过 
           
           
           
              不通过 
              通过 
           
           
           
              无法溯源 
              任务指派 
           
           
           
              无法溯源 
              提 交 
           

           
           
              流程详情