一.父組件代碼

<template><div id="app"><h1 class="box"><pageName> </pageName></h1></div>
</template><script>
import  pageName from "../src/components/pageName.vue";
export default {data() {return {imageUrl: "",};},methods: {},components: {pageName,},
};
</script><style lang="less" scoped></style>>
.box{color: red;
}
</style>

二.子組件代碼

<template><div class=""><h1>我是子頁面</h1></div>
</template><script>
export default {name: "",data() {return {};},components: {},
};
</script><style scoped lang="less"></style>

三.此時父組件和子組件都有scope屬性時候的效果

文字并沒有編程紅色,scope屬性能保證當前頁面的屬性不被污染。

此時我們可以利用deep屬性進行穿透

重寫寫過后的代碼

穿透子組件,本來子組件有獨立的作用域

效果

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

代碼：

效果圖

五.樣式穿透案例

<template><div class=""><el-badge :value="12" class="item"><el-button size="small">評論</el-button></el-badge></div>
</template><script>
export default {name: "",data() {return {};},components: {},
};
</script><style scoped lang="less">
::v-deep .el-badge {.el-button {color: pink;}
}
</style>

效果圖