父子组件中, 父亲要控制子组件的样式,
默认可以直接控制最外层的样式,加上穿透标记可以控制里面的样式
来我们看下:
Heading2.vue
<template>
<div class="item">
<p>java is so easy!!</p>
<!-- h4,h5,h6 略 -->
</div>
</template>
<script>
export default {
props: {
level: {
type: String,
required: true,
},
},
};
</script>
<style lang="scss" scoped>
.item {
width: 300px;
height: 300px;
background-color: pink;
p {
color: red;
}
}
</style>
Index.vue
<template>
<div>
<p>index pager</p>
<headings2 level="2">我是渲染函数渲染出来的!</headings2>
</div>
</template>
<script>
// 相对路径自动提示
import Headings2 from "../components/Headings2";
export default {
components: {
Headings2,
},
};
</script>
<style lang="scss" scoped>
.item {
color: white;
background-color: #ccc;
/deep/ p {
color: green;
}
}
</style>
显示效果:
由于这个特性,这样我们在一个组件中,就可以指定子组件的样式,方便控制,这个很有用!
/deep/ 可以穿透到子组件内部,控制它的样式!