scope,deep穿透的实际应用

一.父组件代码





>
.box{
  color: red;
}

二.子组件代码






三.此时父组件和子组件都有scope属性时候的效果

scope,deep穿透的实际应用_第1张图片

文字并没有编程红色,scope属性能保证当前页面的属性不被污染。

此时我们可以利用deep属性进行穿透

重写写过后的代码

穿透子组件,本来子组件有独立的作用域

scope,deep穿透的实际应用_第2张图片

效果

scope,deep穿透的实际应用_第3张图片

四.穿透element-ui里面的组件

代码:

scope,deep穿透的实际应用_第4张图片

scope,deep穿透的实际应用_第5张图片

效果图

scope,deep穿透的实际应用_第6张图片

五.样式穿透案例






效果图

你可能感兴趣的:(css,前端,javascript,html)