V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
一键将 Markdown 转换为精美的知识卡片,支持 AI 魔幻卡片和长文/链接
MD2Card 在线工具,支持多主题,一键将 Markdown 拆分并生成知识卡片,支持 AI 魔幻卡片和长文/链接转换 md 功能,卡片可编辑,可导出 PNG/SVG/PDF,适合笔记分享与社媒传播。
Promoted by JsonChao
zhuoyue100
V2EX  ›  Vue.js

新手 vue3 样式问题

  •  
  •   zhuoyue100 · 2024-04-28 11:32:32 +08:00 · 1799 次点击
    这是一个创建于 443 天前的主题,其中的信息可能已经有所发展或是发生改变。

    新手学习 vue3 请求几个样式问题:

    1. 组件样式是写在全局文件里面,通过 main.js 引入好一些,还是写在组件里面,使用 scope
    2. 为什么全局样式( scss 写的)会生成一个带有 data-v-hash 的样式,它是 scss 解析成 css 时自动识别 dom 上是否有 data-v-hash 属性的吗?
    3. 现在我的父组件下面有 5 个层级的后代组件,因为它是一个独立模块我想统一把样式写在这个父组件里面,这个时候是使用样式穿透/deep/还是写到全局样式文件里面好一些?
    8 条回复    2024-05-03 16:19:59 +08:00
    zerodli
        1
    zerodli  
       2024-04-28 11:47:40 +08:00
    取决于样式是仅仅作用于这个组件文件还是会影响其他地方。个人项目可以放到单文件组件的 style 标签里,若是库项目,倾向于整理成对应的 style 文件放到另一个位置。

    scope 是启用作用域样式,它会生成组件元素上的 data-v-hash 。
    zhuoyue100
        2
    zhuoyue100  
    OP
       2024-04-28 12:18:42 +08:00
    @zerodli 好的,感谢~
    vinsony
        3
    vinsony  
       2024-04-28 12:28:04 +08:00
    不是全局需要的样式就用 scope
    zhuoyue100
        4
    zhuoyue100  
    OP
       2024-04-28 12:31:45 +08:00
    @vinsony 我全局引入的样式优先级高于 scope, 我在浏览器上看到全局样式会自动加上 data-v-hash 属性,这是为什么
    frankyuu
        5
    frankyuu  
       2024-04-28 13:15:49 +08:00
    @zhuoyue100 为了让样式私有化啊,不然的话有些样式相同会被覆盖, css 是有层叠性的
    zhuoyue100
        6
    zhuoyue100  
    OP
       2024-04-28 13:35:21 +08:00
    @frankyuu 好的,谢谢~
    wingzhingling
        7
    wingzhingling  
       2024-04-28 21:32:05 +08:00 via Android
    单文件组件 CSS 功能 https://cn.vuejs.org/api/sfc-css-features.html
    文档能解决你的大部分问题
    baolinliu442k
        8
    baolinliu442k  
       2024-05-03 16:19:59 +08:00
    用 tailwind 不考虑这些问题了 😃
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5824 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 02:37 · PVG 10:37 · LAX 19:37 · JFK 22:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.