Vue 组件命名，CSS的标准文档流_vue3中css使用组件名作为类名
在Vue 3中，你可以通过使用<script setup>语法糖来创建组件，并在<style>标签中使用组件名作为类名的一部分。这样做可以保证类名的唯一性，避免了全局样式冲突的问题。
以下是一个简单的例子：
<template>
<div class="my-component">
<p class="paragraph">这是一个段落。</p>
</div>
</template>
<script setup>
// setup script 内容
</script>
<style scoped>
.my-component {
/* 组件特有样式 */
}
.paragraph {
/* 仅限于此组件内的段落样式 */
}
</style>在这个例子中，.my-component和.paragraph类名都是基于组件名生成的，不会和其他组件中的类名冲突。scoped属性确保了这些样式只应用于当前组件的标签，不会影响到其他组件或页面的全局样式。
评论已关闭