vue修改子组件中的el-input的placeholder字体颜色

如果直接修改el-input的placeholder字体颜色，其实很简单

 /deep/ .el-input__inner::placeholder {
        color: red;
        text-align: center;
      }
1
2
3
4

但如果是子组件，就很难在父组件中直接去改变，也许是我没有遇到更好的方法
我的解决思路是在父组件中根据条件传值给子组件，子组件根据条件，三元表达式的形式动态增加类名
代码如下：
1/在父组件的子组件上定义redHolder，父组件是列表，所以传值是row.redHolder

                      <EditRemarkInput
                          v-model="row.majorAddRemark"
                          :redHolder="row.redHolder"
                      / >
1
2
3
4

2/在父组件中根据条件赋值

 if (item.xxx > item.xxx) {
            
            item.redHolder = true
          } else {
           
            item.redHolder = false
          }
1
2
3
4
5
6
7

3/在子组件中给input加类名

   <div class="textarea-nput-box">
      <el-input :class="redHolder ? 'invalid' : ''" v-model="remarkStr" :placeholder="editHolder + editTitle" />
   
    </div>
1
2
3
4

4/子组件prop中接收redHolder 的值

  redHolder: {
      type: Boolean,
      default: false,
    },
1
2
3
4

5/子组件css样式

 .textarea-nput-box {
    display: flex;
    align-items: center;
    position: relative;  
    // 改变placeholder字体颜色
    .invalid {
      /deep/ .el-input__inner::placeholder {
        color: red;
        text-align: center;
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12