说明
在 vue教程：脚手架-创建第一个组件 中，style 样式中有 scoped
片段代码如下：
<style scoped> 关键：scoped
#app{
border: red 1px solid;
}
</style>
作用
防止组件之间样式冲突
案例：演示样式冲突
创建组件 UserInfo
在 components 目录创建 UserInfo.vue 文件
没有写 scoped，内容如下：
<template>
<div class="app">
{{msg}}
<div>昵称：{{name}}</div>
<div>性别：{{sex}}</div>
<div>年龄：{{age}}</div>
</div>
</template>
<script>
export default {
data:function(){
return {
msg:'用户信息'
}
},
props:['name','sex','age']//定义子组件时，需要指定 props ，作用是给组件定义属性，表示父组件要传入数据
}
</script>
<style >
/* 关键：没有写 scoped，红色边框 */
.app{
border: red 1px solid;
}
</style>
创建组件 BookInfo
在 components 目录创建 BookInfo.vue 文件
没有写 scoped，内容如下：
<template>
<div class="app">
{{msg}}
<div>名称：{{title}}</div>
<div>价格：{{price}}</div>
<div>作者：{{author}}</div>
</div>
</template>
<script>
export default {
data:function(){
return {
msg:'书的信息'
}
},
props:['title','price','author']//定义子组件时，需要指定 props ，作用是给组件定义属性，表示父组件要传入数据
}
</script>
<style >
/* 关键：没有写 scoped，绿色边框 */
.app{
border: green 1px solid;
}
</style>
使用组件
修改 App.vue 文件，内容如下：
<template>
<!-- 模板 -->
<div id="app">
<user-info :name="fname" :sex="fsex" :age="fage" />
<book-info title='vue从入门到放弃' price='100' author='韩梅梅' />
</div>
</template>
<script>
import BookInfo from './components/BookInfo'
//没有加上 scoped，后引用的样式会覆盖先引用的样式
import UserInfo from './components/UserInfo'
export default {
name: 'App',
components: {
'user-info':UserInfo, //注册局部组件
'book-info':BookInfo
},
data:function(){
return {
fname:'张三',
fsex:'男',
fage:22
}
}
}
</script>
结果
2个组件没有加上 scoped，后引用 的样式会 覆盖 先引用 的样式
相当于下面代码：
var i=0;
i=1;//先赋值
i=2;//后赋值
最终 i 的值是 2
案例：解决样式冲突
只需要将2个组件的 <style> 标签，加上 scoped即可
修改 UserInfo 组件样式：
<style scoped>
/* 关键：加上 scoped，红色边框 */
#app{
border: red 1px solid;
}
</style>
修改 BookInfo 组件样式：
<style scoped>
/* 关键：加上 scoped，红色边框 */
#app{
border: red 1px solid;
}
</style>
原理
查看网页源代码，会发现将 2 个组件的代码都合并到一起
加上 scoped 后，div标签会加上一个属性：data-v-随机数，并根据该 属性设置样式，如下图：
