vue组件样式私有化scoped的实现原理

在vue组件中，style标签上有一个特殊属性：scoped。当给一个style标签添加scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

scoped的实现原理

vue通过在DOM结构以及css样式上加上唯一的标记，保证唯一，达到样式私有化，不污染全局的作用。

vue组件中的scoped属性的效果，主要通过PostCSS转译实现，转译前的vue代码：

<template>
  <div>
    <button class="btn">{{msg}}</button>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
      msg: 'Demo'
    }
  }
}
</script>

<style scoped lang="less">
 .btn{
   width: 50px;
   height: 30px;
   border-radius: 4px;
   background-color: #ccc;
 }
</style>

PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性：

然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom。

最后

以上就是神勇导师为你收集整理的vue组件样式私有化scoped的实现原理vue组件样式私有化scoped的实现原理的全部内容，希望文章能够帮你解决vue组件样式私有化scoped的实现原理vue组件样式私有化scoped的实现原理所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。