vue组件使用scoped实现组件的私有样式以及/deep/深度作用选择符

最新推荐文章于 2024-08-29 16:37:39 发布

Liuax08

最新推荐文章于 2024-08-29 16:37:39 发布

阅读量683

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_59731784/article/details/124770405

版权

一、scoped

默认组件style中定义的样式是全局的，在使用webpack打包时，存在相同名字覆盖的问题，为了解决多组样式名相同出现冲突的问题，此时就可以在style标签中加上scope属性。
原理：
在style中加上scoped属性，就会在此组件中的标签上加上一个随机生成以data-v开头的属性。而且必须是当前组件的元素或者子组件的根元素，才会有这个自定义的属性。
在这里插入图片描述

二、/deep/深度作用符

当父子组件都是用了scoped的情况下，如何在父组件中控制子组件的样式，这个时候就可以用到 /deep/ 深度作用选择符。父组件中控制子组件元素或者类名，覆盖样式，需要在前面加上/deep/.
父组件

<template>
  <div class="box">
    <h1 class="red">父组件</h1>
    <hr />
    <Child />
  </div>
</template>

<script>
import Child from '@/components/Child'
export default {
  components: {
    Child,
  },
 }
</script>

<style scoped>
 .red {
   color: blue;
 }
 .box /deep/ h2 {
   color: lawngreen;
 }
</style>

子组件

<template>
  <div>
     <h2>子组件</h2>
     <p class="red">
      <span>123</span>
    </p>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
 .red {
   color: red;
 }
</style>