Vue在父组件中改变子组件内的某个样式

桃扇骨 2021-09-08 06:48 533阅读 0赞 
  1. <template>
  2.     <div class="cont">
  3.         <footEr></footEr>
  4.     </div>
  5. </template>
  6. <script>
  7.     import footEr from '../../components/foot.vue'
  8.         components: {footEr}
  9. </script>    
  10. <style scoped>
  11.     .footer .index {
  12.         color: #2a82e4;
  13.     }
  14. </style>

方法一： style因为加了 scoper 只对当前组件起作用，那么直接在父组件中写子组件的样式是不会生效的

一种办法是父组件中的style去掉scoped，这种办法多半是不可取的，因为可能会影响全局样式

、第二种办法就是深度作用选择器( >>> 操作符)

  1. <template>
  2.     <div class="cont">
  3.         <footEr></footEr>
  4.     </div>
  5. </template>
  6. <script>
  7.     import footEr from '../../components/foot.vue'
  8.         components: {footEr}
  9. </script>    
  10. <style scoped>
  11.     .cont >>> .index {　　　　/*cont是父组件包裹子组件的类名，index是子组件中要修改样式的类名*/
  12.         color: #2a82e4;
  13.     }
  14. </style>

如果是有些像Sass、less之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。

方法三 /deep/

  1. <style scoped lang="scss">
  2. .cont{
  3.   /deep/ .index{
  4.     color: #2a82e4;
  5.   }
  6. }
  7. </style>
  9. 或者  ::v-deep
  11. <style scoped lang="scss">
  12. .cont{
  13.    ::v-deep .index{
  14.     color: #2a82e4;
  15.   }
  16. }
  17. </style>

发表评论

表情：
评论列表 （有 0 条评论，533人围观）

还没有评论，来说两句吧...

相关阅读