vue中父子组件样式冲突解决方案

        一直以为在vue中加了scoped ,样式就都是相对独立的,然而事实并不是这样。     

        在我将同名的样式名称分别添加给父组件和子组件时,虽然都添加了scoped,但是子组件的样式并没有生效。

vue中父子组件样式冲突解决方案_第1张图片

        如图子组件根元素会选择父组件哈希值作为样式取值。导致子组件样式未生效。(理论上应该用子组件的hash值,对吗?是不是vue-loader的bug呢?)

解决方案:

vue中父子组件样式冲突解决方案_第2张图片

        只需在子组件添加一个根元素,这样就可以隔离开了。 如图所示,可以看到只有根元素会继承的。

码字不易,点个赞啊

你可能感兴趣的:(vue.js,css)