龙空技术网

63、你知道 style 上加 scoped 属性的原理吗?(必会)

池梓沐 521

前言:

此刻小伙伴们对“style属性怎么用”大约比较珍视,朋友们都想要了解一些“style属性怎么用”的相关内容。那么小编同时在网络上搜集了一些对于“style属性怎么用””的相关知识,希望姐妹们能喜欢,同学们快快来学习一下吧!

1、什么是 scoped

在 Vue 组件中,为了使样式私有化(模块化),不对全局造成污染,可以在 style 标签上添加 scoped 属性以表示它的只属于当下的模块,局部有效。如果一个项目中的所有 vue 组件style 标签全部加上了 scoped,相当于实现了样式的私有化。如果引用了第三方组件,需要在当前组件中局部修改第三方组件的样式,而又不想去除 scoped 属性造成组件之间的样式污染。此时只能通过穿透 scoped 的方式来解决,选择器。

2、scoped 的实现原理:

Vue 中的 scoped 属性的效果主要通过 PostCSS 转译实现,如下是转译前的 Vue 代码:

<template><div>Vue.js scoped</div></template>

<style scoped>.scoped {font-size:14px;}</style>

浏览器渲染后的代码:

<div data-v-fed36922>Vue.js scoped</div>

.scoped[data-v-fed36922]{font-size:14px;}

即:PostCSS 给所有 dom 添加了一个唯一不重复的动态属性,然后,给 CSS 选择器额外添加一个对应的属性选择器来选择该组件中 dom,这种做法使得样式私有化。

标签: #style属性怎么用