1. scoped的作用: ---- 加上scoped的作用是只是对于当前的组件有用(样式)
对于某一个组件,如果style添加上scoped属性,给当前子组件的结构中都添加上一个data-v-xxxx自定属性,会发现vue是通过属性选择器,给需要添加的元素添加上样式
没加 scoped,html标签都是没有 自定义属性
加了 scoped 后,html标签上会加上一个自定义属性,都是以 data-v-哈希值 ’
h3[ data-v-7ba5bd90 ] ---- 属性选择器
2. 子组件的跟标签(拥有父组件当中一样的自定义属性),如果子组件没有根节点,子组件中的H3就会和父组件中书写的样式相同,也会添加上相应的样式。
<template>
<div>
<h3>我是父组件</h3>
<Chlid/> <!--如果子组件中 没有 根元素 div 这个标签, H3 也会受到父组件的影响-->
</div>
</template>
<script>
import Child from '../Child'
el:'App',
components:{
Child
}
</script>
<style scoped>
h3{
color:red
}
</style>
<!--Child.vue-->
<template>
<div>
<h3>我是子组件</h3>
</div>
</template>
<style scoped>
</style>
3. 注意:
如果父组件的样式有(scoped) ,而且还想影响到子组件的样式?像这种情况我们可以使用 深度选择器。
深度选择器可以实现样式穿透:
>>> 一般用于原生 CSS
/deep/ 一般用于 less
::v-deep 一般用户 scss
<template>
<div>
<h3>我是父组件(APP) </h3>
<h3> scoped添加上给组件的标签新增一个自定义属性</h3>
<Child1/>
</div>
</template>
<script>
//import Child from './components/child.vue';
import Child1 from './components/child1.vue';
export default {
name :'App'
components:(
Child1
}
</script>
<style scoped>
/*原生css 深度选择器*/
>>>h3{
color:red;
}
</style>
<!--Child1.vue--->
<template>
<div>
<h3>我是子组件(Child1) </h3>
<ul>
<li>电影</li>
<li>音乐</li>
<li>游戏</li>
</ul>
</div>
</template>
<script>
export default {
name :'Child1'
</script>
<style scoped>
</style>