Vue scoped属性的作用

初来乍到到

于 2019-09-12 16:49:50 发布

阅读量2.2k

点赞数 1

分类专栏： Vue 文章标签： scoped Vue

本文链接：https://blog.youkuaiyun.com/weixin_43868692/article/details/100776379

版权

Vue 专栏收录该内容

27 篇文章

订阅专栏

本文深入探讨Vue中样式私有化的功能与实现原理，通过示例解析如何使用scoped属性确保组件样式仅在当前模块生效，避免全局样式污染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能作用：

实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。

实现原理：

可以进行观察DOM结构来发现：vue在DOM结构以及css样式上加上唯一的标记，保证唯一性来达到样式私有化，来保证不会被污染全局的作用。

使用栗子：

<template>
  <div class="nav">hi</div>
</template

<style scoped>
.nav {
  color: blue;
}
</style>

如上面的这个例子上面的style样式只在下面这个组件里起作用

如果有个别样式不想只想这个组件使用可以如下：

<template>
  <div class="nav">hi</div>
  <div class="nav Go">hello</div>
</template

<style scoped>
.nav {
  color: blue;
}
</style>

<style>
.Go {
  background:yellow;
}
</style>