Vue:多组件样式冲突问题解决

一、场景描述

我们在开发Vue项目的时候,会有很多的组件,每个组件里,可能都会写相应的样式,这时候就会出现在父组件引入子组件的时候,同名样式会冲突的问题。从而导致样式出问题。

二、解决办法

style标签加上scoped属性即可

加上scoped之后,这个样式只会作用在当前组件的html模板上。

css 复制代码
<style scoped>
    .demo{
        background-color: orange;
    }
</style>
相关推荐
不好听61319 分钟前
React 父子组件通信:从 Todo 应用理解单向数据流
前端·react.js
光影少年23 分钟前
RN 路由栈管理、页面销毁、返回拦截
javascript·react native·react.js
_lucas27 分钟前
做了一个glsl在线调试工具
前端·javascript·three.js
To_OC9 小时前
LC 51 N 皇后:我以为难的是回溯,结果栽在了对角线下标
javascript·算法·leetcode
腻害兔9 小时前
【若依项目-产品经理视角】深度拆解 RuoYi-Vue-Pro 商城模块:从商品管理到交易引擎,50 张表撑起一整套电商系统
java·大数据·vue.js·产品经理·ai编程
不好听6139 小时前
从一行 JSX 到屏幕像素:前端开发者必须懂的浏览器渲染管线
前端
恒拓高科WorkPlus9 小时前
企业级内网即时通讯建设模型:BeeWorks内网IM四层架构
前端
前端小李子10 小时前
前端环境变量裸奔?我用 EnvShield 给它穿了件防弹衣
前端
youtootech10 小时前
HarmonyOS《柚兔学伴》项目实战25-我的页面、Web 嵌入与项目总结
前端·华为·harmonyos
小林ixn10 小时前
从零到一理解 React 父子组件通信:手写一个 Todo 应用带你彻底搞懂单向数据流
前端·javascript·react.js