vue scoped

acgchan

于 2021-08-24 09:01:19 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

3 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用'scoped'属性避免组件样式污染全局，通过实例展示了如何在组件模板、脚本和样式标签中应用此特性，确保组件样式隔离。

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

scoped
vue项目一般是单页面、多组件，整个项目共用一个css样式表，有时候我们在写组件的过程中并不希望组件的样式污染全局作用域（毕竟不同组件之间重名的class很正常），因此我们会在组件的样式标签上加上scoped，例如下面这个最基本vue组件框架：

<template>
...
</template>

<script>
import ...
export defualt {
	data(){
	...
	}
	...
}
</script>

<style lang="less" scoped>
...
</style>