基于vue/cli3.0+脚手架搭建Vue项目(09)

---

---

前言

vue项目的style标签使用了scoped修饰符后，修改子组件样式（或者elementUI组件样式）通常不生效，因此需要用到下面的修饰符

---

/deep/，::v-deep，>>>修饰符的使用

父组件：选择器前面添加修饰符

<template>
  <childrenCompnent />
</template>
<script>
import childrenCompnent from './children-compnent.vue'
export default{
  components: { childrenCompnent }
}
<style lang="scss" scoped>
/deep/ .el-button {
  color: red;
}
::v-deep .boy {
  color: red;
}
>>> .girl {
  color: red;
}
</style>

子组件：

<template>
    <div class="children-compnent">
        <el-button>默认按钮</el-button>
        <div class="boy">男同学</div>
        <div class="girl">女同学</div>
    </div>
</template>

如果没有使用sass预编译, 可以使用::v-deep，使用/deep/或者>>>通常会提示引入预编译语言

---

总结

蓝莲花~