基于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/或者>>>通常会提示引入预编译语言

总结

蓝莲花~

最后

以上就是迷你香菇最近收集整理的关于vue项目在父组件中修改子组件css样式（包括子组件内elementUI组件样式）— /deep/，::v-deep，＞＞＞基于vue/cli3.0+脚手架搭建Vue项目(09)前言/deep/，::v-deep，>>>修饰符的使用总结的全部内容，更多相关vue项目在父组件中修改子组件css样式（包括子组件内elementUI组件样式）—内容请搜索靠谱客的其他文章。