vue父组件控制子组件样式

vue父组件控制子组件样式

vue组件控制样式

• 存在scoped 属性：只在当前组件中生效（给组件内的标签加哈希自定义属性）

  <style scoped lang="less">
  	.body-bg {
  	  background: red;
  	}
  </style>
  

• 不存在scoped 属性：会在整个项目中生效

  <style lang="less">
  	.body-bg {
  	  background: red;
  	}
  </style>
  

父组件控制子组件样式

问题场景：当使用一些框架，比如 element-ui，经常会调用组件，那么如何控制组件内的标签样式？

直接去掉样式的scoped属性，但会造成样式全局污染

解决：

1. 官方：样式穿透（推荐）
   在控制子组件的样式前面加入 /deep/

   /deep/.a{
   	color: white;
   }
   

2. 多style
   一个组件内 写多个style
   分别控制全局和局部的样式

   	<style scoped>
   	.box .a{
   	  color: white;
   	}
   	</style>
   	<style>
   	.b{
   	  color: red;
   	}
   	</style>
   

   注意：全局样式最好加一个限制条件，避免全局污染