Web前端最全Vue 组件命名，CSS的标准文档流_vue3中css使用组件名作为类名，2024年最新面试前端开发自我介绍
warning:
这篇文章距离上次修改已过187天，其中的内容可能已经有所变动。
在Vue 3中，你可以使用组件名作为CSS类名，但要确保这样做不会与其他组件或全局CSS中的类名冲突。Vue 3提供了一个新的特性叫做Fragment，允许组件有多个根节点，但这些根节点不会进入DOM。
以下是一个简单的Vue 3组件示例，它使用组件名作为CSS类名：
<template>
<div :class="$style[componentName]">
<!-- 组件内容 -->
</div>
</template>
<script setup>
import { computed, ref } from 'vue'
const componentName = computed(() => `${props.name}-component`)
</script>
<style module>
.my-component-component {
/* CSS样式 */
}
</style>在这个例子中，:class="$style[componentName]" 表示CSS类名是动态计算出来的，依赖于componentName的值。$style是一个特殊的导出，它代表了该组件的CSS模块。这样做可以确保类名是独一无二的，不会和其他组件的类名冲突。
请注意，这种方法要求你使用<style module>而不是<style>来定义CSS模块。这是Vue 3中实现组件级别CSS作用域的推荐做法。
评论已关闭