基于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组件样式）— /deep/，::v-deep，＞＞＞基于vue/cli3.0+脚手架搭建Vue项目(09)前言/deep/，::v-deep，>>>修饰符的使用总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。