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 的形式进行区分。

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

赞 (8)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)