人人体育官网下载(中国)有限公司

如何解决vue组件之间的样式冲突问题？

< template > < div class = "container"data - v - 001 > < h3 data-v-001 > 轮播图组件

2. style 节点的 scoped 属性

为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题，示例代码如下：

3./deep/ 样式穿透

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器。

										.title {  color:blue;}/deep/ .title {  color：blue；}
									

注意/deep/是vue2.x中实现样式穿透的方案。在vue3.x中推荐使用：deep()替代/deep/。