vue3 变量名拼接

### 实现变量名拼接

在 Vue 3 中，通过使用 SASS 函数可以方便地实现 BEM 规范下的类名拼接。这不仅提高了代码的可读性和维护性，还使得样式管理更加高效[^2]。

#### 使用 SASS 进行类名拼接

为了简化开发流程，在项目中引入了三个辅助函数 `blockClass`、`elementClass` 和 `modifierClass` 来处理不同场景下所需的 CSS 类名组合：

// _bem.scss 文件内容示例
@mixin block($name) {
    .#{$name} {
        @content;
    }
}

@mixin element($parent, $child) {
    &__#{$child} {
        @content;
    }
}

@mixin modifier($modiferName, $value: true) {
    &[#{$modiferName}="#{if($value === true, '', $value)}"] {
        @content;
    }
}

上述 SCSS 片段展示了如何创建基于 BEM 命名约定的基础 mixins。这些 mixin 能够帮助开发者快速构建复杂的 HTML 结构对应的样式规则。

#### 将 SASS 辅助方法注册至全局属性

为了让整个应用程序都能轻松调用这些工具函数而无需重复导入，可以在项目的入口文件(main.ts 或 main.js)中配置如下所示:

import { createApp } from 'vue'
import App from './App.vue'

// 导入用于生成BEM类名的帮助函数
import { blockClass, elementClass, modifierClass } from './handleScssVar';

const app = createApp(App);

// 注册为全局可用的方法
app.config.globalProperties.$blockClass = blockClass;
app.config.globalProperties.$elementClass = elementClass;
app.config.globalProperties.$modifierClass = modifierClass;

app.mount('#app')

这样做的好处在于任何组件都可以直接访问 `$blockClass`, `$elementClass` 和 `$modifierClass` 方法来动态计算所需的应用于模板中的 class 名称字符串。

#### 组件内实际运用案例

下面是一个简单的例子展示怎样利用已定义好的 global properties 完成具体操作：

<template>
<div :class="$blockClass('my-block')" role="button">
    <span :class="$elementClass('my-block', 'text')">Click me!</span>
</div>
</template>

<script lang="ts">
export default defineComponent({
setup() {

return {};
},
});
</script>

在这个例子中，假设有一个名为 "my-block" 的区块(block)，其中包含了文本元素(element)。“$blockClass” 和 “$elementClass” 分别用来获取对应级别的 CSS 类名，并将其绑定给 div 和 span 标签作为其 className 属性值的一部分。