『VUE』19. scope避免组件之间样式互相覆盖（详细图文注释）

---

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

使用多个组件带有样式

ComPonent1.vue

<template><h3>ComPonent1.vue</h3>
</template><script></script><style>
h3{color: blue;
}
</style>

ComPonent2.vue

<template><h3>ComPonent2.vue</h3>
</template><script></script>
<style>
h3 {color: red;
}
</style>

猜猜看ComPonent1和ComPonent2分别是什么颜色?
ComPonentDemo.vue

<template><ComPonent1 /><ComPonent2 /><h3>组件结构</h3>
</template><script>
import ComPonent2 from "./ComPonent2.vue";
import ComPonent1 from "./ComPonent1.vue";export default {components: {ComPonent2,ComPonent1,},
};
</script>

---

分析

发生 CSS 覆盖的原因是因为在不同组件的

组件1是蓝色,组件2是红色,首先一个颜色,说明了两者的css样式存在覆盖对方的情况,那到底是谁覆盖谁主要是看引入的顺序
谁最后引入谁就覆盖之前引入的组件.

---

如何避免css覆盖

使用scope,在每个组件的style修改<style scope>,注意最好刷新浏览器缓存才会生效,我刷新了几次后才看到颜色改变的效果.

其实正常开发环境无论如何都不能直接用h3作为选择器.太不规范,这里只是提供思路,一般情况默认加上scoped,如果你确定这样式只在本组件使用

scoped 是一个在 Vue 单文件组件中的

scoped 属性会自动为每个选择器添加一个唯一的哈希值，以确保样式仅适用于当前组件中的元素。这意味着在当前组件的模板中使用的类名或标签选择器，只会选择当前组件中的对应元素，不会影响到其他组件中相同类名或标签的元素。

使用 scoped 属性可以提供更好的组件封装性和可复用性。每个组件的样式都被隔离到自己的作用域内，开发者不必担心全局样式的冲突问题。

需要注意的是，scoped 属性只能影响当前组件内部的样式，无法阻止外部样式对当前组件的影响。如果需要更强的样式隔离，可以考虑使用 CSS Modules 或 CSS-in-JS 等技术来实现更加严格的组件样式隔离。

<template><h3>ComPonent1.vue</h3>
</template><style scope>
h3 {color: blue;
}
</style>

<template><h3>ComPonent2.vue</h3>
</template><style scope>
h3 {color: red;
}
</style>

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』

---