VUE中组件CSS的作用域

_yangyi

于 2021-07-22 18:04:14 发布

阅读量220

点赞数

分类专栏：笔记文章标签： css vue

本文链接：https://blog.youkuaiyun.com/weixin_44093204/article/details/119005094

版权

笔记专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了Vue中style样式的两种模块化方式：scoped和module。通过示例代码展示了如何限制样式作用域，确保组件间的样式隔离，从而实现更高效的CSS管理。了解这些技巧对于提升前端开发效率和代码质量至关重要。

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

一、常规（给不同的class名）

<template>
    <div>
        <h1 class='yy_back yy_color'>杨·一</h1>
    </div>
</template>

<style>
	.yy_back {
	   background: red;
	}
	.yy_color{
        color: #409EFF;
    }
</style>

二、style样式上增加scoped

<template>
    <div>
        <h1 class='yy_back yy_color'>杨·一</h1>
    </div>
</template>

<style scoped>
	.yy_back {
	   background: red;
	}
	.yy_color{
        color: #409EFF;
    }
</style>

三、style样式上增加module


<template>
    <div>
        <h1 :class="[$style.yy_back, $style.yy_color]">杨·一</h1>
    </div>
</template>

<style module>
	.yy_back {
	   background: red;
	}
	.yy_color{
        color: #409EFF;
    }
</style>