type
status
date
slug
summary
tags
category
icon
password
《学习Vue3第十一节:scoped和BEM框架》里,讲过了样式穿透 :deep() 选择器

1.插槽选择器 :slotted()

默认情况下,在子组件修改父组件通过插槽传过来的内容的样式,是不会起作用的,因为作用域样式不会影响到<slot></slot>渲染出来的内容。这时就可以使用插槽选择器:slotted()
案例:
在子组件里定义一个插槽
在父组件里引入子组件,并通过插槽传给子组件一个div
在子组件里,使用:slotted() 直接修改父组件传递的class名为a的div样式
页面效果:
notion image

2.全局选择器 :global()

以前我们想加入全局样式,通常都是新建一个不加scoped<style>标签,现在我们可以直接使用:global()来更优雅地解决

3.动态 CSS

单文件组件的<style>标签可以通过v-bind这一CSS函数,将CSS的值关联到动态的组件状态上
如果textColor声明的是对象,就需要在v-bind里加引号

CSS module

<style module> 标签会被编译为 CSS Modules 并且将生成的 CSS 类作为$style对象的键暴露给组件:
自定义注入名称,多个样式可以用数组:
与组合式 API 一同使用:
注入的类可以通过 useCssModule APIsetup()<script setup> 中使用。对于使用了自定义注入名称的 <style module> 模块,useCssModule 接收一个对应的 module attribute 值作为第一个参数,使用场景一般用于TSX 和 render 函数 居多
《新兴村》闲记学习Vue3第二十四节:定义全局函数和变量
衔蝉
衔蝉
一个普通的干饭人🍚
公告
type
status
date
slug
summary
tags
category
icon
password
欢迎来到衔蝉的博客小站✨
这里是我的个人学习、生活记录
--- 免责声明 ---
⚠️ 本站内容仅代表个人观点
⚠️ 本站内容仅供学习参考使用
--- 关于我 ---
我要如加菲猫一般地活着
一大碗杂碎面
就能换来一个艳阳天🌻