《Vue应用开发》课件——3.4解决组件之间的样式冲突.pptxVIP

解决组件之间的样式冲突;掌握组件之间样式冲突问题的解决方法，能够运用style标签的scoped属性和深度选择器解决组件之间样式冲突的问题;在默认情况下，写在Vue组件中的样式会全局生效，很容易造成多个组件之间的样式冲突问题。

作业：步骤1ComponentUse组件中的h5元素添加边框样式，具体代码如下。;保存上述代码后，在浏览器中访问:5173/，添加边框样式后的页面效果如下图所示。;为什么组件之间会产生样式冲突？;;1.scoped属性;下面演示scoped属性的使用。

作业步骤2：修改ComponentUse组件，为style标签添加scoped属性，具体代码如下。;打开开发者工具，切换到Elements面板，查看父组件的h5元素的代码，如下图所示。;2.深度选择器;;步骤1;保存上述代码后，在浏览器中访问:5173/，添加深度选择器实现样式穿透的页面效果如下图所示。;打开开发者工具，切换到Elements面板，查看LocalComponent组件的h5元素的代码，页面效果如下图所示。