scoped 属性的作用是：让样式在局部生效，避免冲突。
引出组件样式冲突的问题：
首先创建 Add.vue 和 Edit.vue 两个组件，分别定义相同的 class 名 添加不同的样式。
<template> <div> <h1 class="box">添加</h1> </div> </template> <script> export default { name: "Add" } </script> <style> .box { background-color: aqua; } </style>
<template> <div> <h1 class="box">编辑</h1> </div> </template> <script> export default { name: "Edit" } </script> <style> .box { background-color: red; } </style>
然后在 Home.vue 页面引入这两个组件。
<template> <div> <Add></Add> <Edit></Edit> </div> </template> <script> import Add from "../components/Add" import Edit from "../components/Edit" export default { name: 'Home', components: { Add, Edit } } </script>
注：当两个组件定义相同的类名时 就会造成样式冲突的问题 并且页面显示的样式是由 import 引入顺序决定的 最后引入的样式会覆盖前面引入的样式。
例：将引入顺序换一下，最后引入 Add.vue 组件 就会显示 Add.vue 组件的样式。
<template> <div> <Add></Add> <Edit></Edit> </div> </template> <script> import Edit from "../components/Edit" import Add from "../components/Add" export default { name: 'Home', components: { Add, Edit } } </script>
总结：如果样式发生冲突 优先显示最后引入的组件样式。
避免样式冲突 scoped 属性：
想要避免样式冲突的问题，可以在每个组件的 style 标签上添加 scoped 属性。
<template> <div> <h1 class="box">添加</h1> </div> </template> <script> export default { name: "Add" } </script> <style scoped> .box { background-color: aqua; } </style>
<template> <div> <h1 class="box">编辑</h1> </div> </template> <script> export default { name: "Edit" } </script> <style scoped> .box { background-color: red; } </style>
注：它的原理就是给每个组件标签添加一个随机的属性 再配合这个属性添加样式。
原创作者：吴小糖
创作时间：2023.4.5
