这篇文章主要介绍了Vue3新特性之在CompositionAPI中使用CSSModules,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在 Vue 3 Composition API 最近的一次 beta 升级中，无论是 Vue 3 本 3 库 vue-next，还是面向 Vue 2 过渡用的 @vue/composition-api 库中，都同步更新了一个 useCSSModule 函数 — 用来在使用了 Composition API 的 Vue 实例中，支持 CSS Modules 语法。
首先来看看什么是 CSS Modules：
CSS Modules
CSS Modules 是一种 CSS 的模块化和组合系统。vue-loader 集成 CSS Modules，可以作为模拟 scoped CSS 的替代方案。
启用 CSS Modules
如果是使用 vue cli 创建的项目，应该已经默认开启了这一特性；如果项目中需要手动开启，按如下设置：
或者与其它预处理器一起使用：
|
1
|
// webpack.config.js -> module.rules { test: /\.scss$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { modules: true } }, 'sass-loader' ] } |
然后在组件中的
在组件中访问 CSS Modules
在
对于 JSX 组件，由于其没办法用 scoped style，所以 CSS Modules 是个很好的选择:
|
1
|
|
Vue 3.x 中的 useCSSModule
引入 useCSSModule 函数后，在 Composition API 组件中使用 CSS Modules 就有了标准方案：
|
1
|
<template> <span :class="$style.span1">hello 333 - {{ text }}</span> </template> |
其源码实现也是非常之简单，基本就是取出 this.$style 而已：
|
1
|
export const useCSSModule = (name = '$style'): Record<string, string=""> => { const instance = getCurrentInstance() if (!instance) { __DEV__ && warn(`useCSSModule must be called inside setup()`) return EMPTY_OBJ } const mod = (instance as any)[name] if (!mod) { __DEV__ && warn(`Current instance does not have CSS module named "${name}".`) return EMPTY_OBJ } return mod as Record<string, string=""> } </string,></string,> |
自定义 CSS Modules 注入名称
通过观察 useCSSModule 的源码发现，CSS Modules 的 name 好像可以不只是 $style；确实，在 .vue 文件中可以定义不止一个
到此这篇关于Vue3新特性之在Composition API中使用CSS Modules的文章就介绍到这了
