专栏首页前端资源Vue项目中scoped属性的作用,及scoped穿透

Vue项目中scoped属性的作用,及scoped穿透

我们在使用 Vue 的开发新项目的时候,会发现 Vue 给 <style> 标签添加了一个 scoped 属性。

什么是 scoped

scoped 属性是 HTML5 中的新属性,是一个布尔属性,如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。

Vue 的转译

Vue 中 scoped 属性的效果主要是通过 PostCss 实现的。

转译前的代码:

<template>
  <h1 class="title">前端资源网</h1>
</template>

<style scoped>
.title{
  font-size: 16px;
  color: #ccc;
}
</style>

转以后的代码:

<h1 data-v-e43c18bc="" class="title">前端资源网</h1>

.title[data-v-e43c18bc] {
  font-size: 16px;
  color: #ccc;
}

PostCSS 给一个组件中所有的 DOM 添加了一个独一无二的动态属性,然后给 CSS 选择器额外添加了一个对应的属性来选择该组件中的 DOM,这种做法使得样式只作用于含有该属性的 DOM ——组件内部 DOM 。

这样如果使用了 Ant Design for Vue 或者 Element UI 等第三方组件,就会出现 CSS 设置不起效的问题,无法通过 CSS 修改组件的样式。可以使用下面的方法来解决:

scoped 穿透:

1、使用 >>> 可以穿透 scoped 属性,修改其他第三方组件的样式。

<style scoped>
  外层 >>> 第三方组件 {
    样式
  }
</style>

2、使用曲线救国的一个方法,用两个 style 标签,一个带 scoped 属性,一个不带 scoped 属性,用来修改第三方组件的样式。

<style>
  /* 全局样式 */
</style>

<style scoped>
  /* 局部样式 */
</style>

3、使用 sass 或 less 的样式穿透 /deep/

<style scoped>
/deep/ .title {
  color: #888;
}
</style>

4、还有一种就是不使用 scoped 属性,通过在最外层加 id 或者 class 的形式进行区分。

不论是使用何种方式,都需要与团队的同事沟通好,统一使用哪种方法,保证项目整合的时候不会出现冲突。

声明:本文由w3h5原创,转载请注明出处:《Vue项目中scoped属性的作用,及scoped穿透》 https://www.w3h5.com/post/461.html

本文已加入 腾讯云自媒体分享计划 (点击加入)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 利用正则批量清理Teleport Ultra/Pro冗余代码

    Teleport 是一款非常优秀的网站离线浏览工具(即网站整站下载工具),但该软件下载的网页文件里会包含大量冗余代码(如:tppabs),手动去修改工作量很大。

    德顺
  • 安全狗一键优化后出现网站无法访问的解决方法

    今天使用了他的服务器优化功能,基本上点了一键优化,网站出现无法访问的现象,报错“ERR_CONNECTION_TIMED_OUT”。

    德顺
  • 利用CSS选择器nth-child实现隔行设置不同样式

    奇葩老板就会有奇葩需求,他要求像上图一样,每两行用一条横线隔开,但这是循环出来的呀,怎么才能每隔一行选中5个呢?

    德顺
  • 三种方式解决vue中v-html元素中标签样式

    三.通过 >>> 可以使得在使用scoped属性的情况下,穿透scoped,修改其他组件的值

    honey缘木鱼
  • CSS3着重符及其fallback

    在中文里面,我们一般会在文字下方加上圆形符号。在日语中会在文字上方加上小顿号。在CSS3中如下属性可以控制着重符号:

    mmzhou
  • JavaScript之Style属性学习

    当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用...

    郑小超.
  • v-html指令渲染出的内容如何添加样式

      在vue使用中,指令 v-html渲染页面经常用到,类似于jQuery的$('x').html( )去渲染。通过指令 v-html渲染出来的内容还会带有原来...

    流眸
  • 运维请注意:”非常危险“的Linux命令大全

    Linux命令是一种很有趣且有用的东西,但在你不知道会带来什么后果的时候,它又会显得非常危险。所以,在输入某些命令前,请多多检查再敲回车。 rm –rf rm...

    FB客服
  • URPC 2019 水下目标检测竞赛冠军方案:多图像融合增强

    下面要介绍的论文发于2019年12月,题为「ROIMIX: PROPOSAL-FUSION AMONG MULTIPLE IMAGESFOR UNDERWATE...

    BBuf
  • UnifyID的研究人员使用神经网络生成风格化图像扰乱API识别

    肉眼可以相对容易地将猫的图片与迷惑人的版本连接起来,但这对于现成的计算机视觉API并非总是如此。在CVPR会议上,来自UnifyID的研究人员证明,猫科动物的风...

    AiTechYun

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动