vue子组件里面的伪元素等访问父组件传递过来的样式参数

虽然可以在子组件标签里面通过 :style="{}" 行类样式来动态设置想要的样式，但是当我们设置了某些标签的伪元素，想给伪元素也通过父组件来传递样式属性时，好像就没什么办法了。

不过最近翻到了一种解决方案，比如我要给一个div的::before动态设置color,通过根元素标签里面的 :style="{--color: color}" ,然后在 ::before 里面的css写为 color: var(--color) 即可，其余属性均可自定义。下面上示例代码：

<div

        class="linear-box"

        :style="{

            '--color': color

        }"

    ></div>

 

props: {

        color: {

            type: String,

            default: () => {

                return '';

            }

        },

}

 

.linear-box {

    position: relative;

    border-radius: 0.33rem;

    overflow: hidden;

    &::before {

        content: '';

        color: var(--color)

    }

}