css 穿透和处理问题

父子组件中， 父亲要控制子组件的样式，

默认可以直接控制最外层的样式，加上穿透标记可以控制里面的样式

来我们看下：

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/  可以穿透到子组件内部，控制它的样式！