Vue3新增加的css语法糖

一、deep
复制代码
<template>
    <div class="">
        <el-input /> 
    </div>
</template>
<style scoped>
/* 样式穿透 */
:deep input {
    background: red;
}
</style>
二、slotted

子组件修改插槽里面的样式

复制代码
<template>
    <div class="">
        <child>
            <div></div>
        </child>
    </div>
</template>

<style scoped>
/* 修改插槽样式 */
:slotted(div) {
    background: red;
}
</style>
三、global

scoped里面依然可以写全局样式

复制代码
<template>
    <div class="">

    </div>
</template>
<style scoped>
/* 全局样式 */
:global(div) {
    background: red;
}
</style>
四、v-bind
复制代码
<template>
    <div class="">

    </div>
</template>
<script setup lang="ts">
import { ref } from "vue"
const bag = ref<string>('red')
</script>
<style scoped>
/* 动态样式*/
div {
    background: v-bind(bag)
}
</style>
五、module
复制代码
<!-- 将生成的 CSS 类作为 $style 对象的键暴露给组件 -->
<template>
    <div :class="$style.title"></div> 
</template>

<style module>
.title {
    color: red;
}
</style>

<!-- 将生成的 CSS 类作为 jx 对象的键暴露给组件-->
<template>
   <div :class="jx.title"></div> 
</template>
<style module="jx">
.title {
    color: red;
}
</style>

可以通过获取

复制代码
<script setup lang="ts">
import { useCssModule } from "vue"
const jx = useCssModule('jx')
console.log(jx.title);
const user = `<div class="${jx.title}">12313</div>`
</script>
<style module="jx">
.title {
    color: red;
}
</style>
相关推荐
Asort43 分钟前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
真夜44 分钟前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
艾小码1 小时前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
干就完了11 小时前
js对象常用方法都在这,使用时想不到?不存在的
前端·javascript
艾小码1 小时前
还在硬邦邦跳转页面?Vue这3招让应用丝滑如德芙!
前端·javascript·vue.js
子兮曰1 小时前
🚀前端依赖配置避坑指南:深度解析package.json中devDependencies的常见误解
前端·javascript·npm
forever_Mamba1 小时前
实现一个高性能倒计时:从踩坑到最佳实践
前端·javascript
小帆聊前端1 小时前
JS 原型链深度解读:从混乱到通透,掌握 90% 前端面试核心
javascript
子兮曰1 小时前
浏览器与 Node.js 全局变量体系详解:从 window 到 global 的核心差异
前端·javascript·node.js