单文件组件由三个不同的实体组成：模板、脚本和样式。一切这些都很关键，但后者往往被漠视，虽然它或许会变得复杂，并经常造成曲折和失误。更好地理解可以改良代码审查并缩小调试期间。

这里有7个小贴士可以协助你：

1.样式作用域和插槽内容

将样式的作用域限定为只影响以后组件，是防止组件耦合和异常反作用的有效战略。

它是经过增加scoped属性来转换以下内容来成功的：

<template><divclass="title">Helloworld!</div></template><stylescoped>.title{font-size:24px;}</style>

<template><divclass="title"data-v-7ba5bd90>Helloworld!</div></template><stylescoped>.title[data-v-7ba5bd90]{font-size:24px;}</style>

假构想让样式影响子组件，可以经常使用选用器。

<stylescoped>.a:deep(.b){/*...*/}</style>

其编译为：

.a[data-v-7ba5bd90].b{/*...*/}

经常使用插槽选用器对插槽内的内容也是如此。

<stylescoped>:slotted(div){color:red;}</style>

2.作用域选用器性能

作用域样式不会消弭对类的需求。由于CSS选用器的上班形式，当经常使用作用域时， p{color:red} 的速度会慢很多倍。假设经常使用类来替代，性能方面的影响可以疏忽不计。

<template><h1class="title">Helloworld!</h1></template><stylescoped>.title{font-size:24px;}</style>

<template><h1>Helloworld!</h1></template><stylescoped>h1{font-size:24px;}</style>

3.全局样式

影响整个运行程序的样式或许不是一个好主意。假设您还是想这么做，可以将作用域样式与非作用域样式混合经常使用，或许经常使用伪选用器

<stylescoped>:global(.red){color:red;}</style>

4.样式中的JavaScript变量

自Vue3.2版起，可以在样式标签内经常使用。这可以带来一些幽默的用例，比如只需几行代码就能成功色彩选用器。

<template><h1class="text">HelloWorld!</h1><inputtype="color"v-model="color"/></template><scriptsetup>import{ref}from"vue";constcolor=ref("");</script><style>.text{color:v-bind(color);}</style>

一个更初级的用例是使可重用运行程序图标组件的图标大小灵活化。

<template><p><inputtype="radio"v-model="size":value="sizes.s"/>S<inputtype="radio"v-model="size":value="sizes.m"/>M<inputtype="radio"v-model="size":value="sizes.l"/>L<inputtype="radio"v-model="size":value="sizes.xl"/>XL</p><divclass="icon"/></template><scriptsetuplang="ts">import{ref}from"vue";enumsizes{s=8,m=16,l=32,xl=64,}constsize=ref(sizes.xl);</script><style>.icon{width:v-bind(size+"px");height:v-bind(size+"px");background:#cecece;}</style>

5.CSS模块

只需在样式标签中增加属性，即可立刻允许CSS模块。这些类会经过变量智能显示在模板中。

<template><p:class="$style.red">Thisshouldbered</p></template><stylemodule>.red{color:red;}</style>

6.CSS与SCSS中的变量

SCSS变量是我们编写CSS形式的一次性严重改革。在经常使用预处置器之前，经常使用变量是无法能的。尔后，CSS迎头赶上，如今一切干流阅读器都允许CSS变量。CSS变量提供了SCSS变量所能做到的一切，此外还提供了更简便的主题配置，因此在这场争执中，CSS变量显著胜出。

7.SCSSinclude与extend

这两个SCSS助手经常会惹起混杂，由于它们都可以用来缩小SCSS代码的重复。CSS输入中存在一些纤细的差异，您应该留意。

协助程序用于蕴含在mixin块中编写的代码。

<template><pclass="error-text">HelloWorld!</p><pclass="error-notification">HelloWorld!</p></template><stylelang="scss">@mixinerror{color:red;}.error-text{@includeerror;font-size:24px;}.error-notification{@includeerror;border:1pxsolidred;padding:8px;}</style>

生成的CSS将依据须要屡次重复代码

.error-text{color:red;font-size:24px;}.error-notification{color:red;border:1pxsolidred;padding:8px;}

另一方面，当元素简直相反时更有用。

<template><pclass="error-text">HelloWorld!</p><pclass="error-notification">HelloWorld!</p></template><stylelang="scss">%error{color:red;}.error-text{@extend%error;font-size:24px;}.error-notification{@extend%error;border:1pxsolidred;padding:8px;}</style>

生成的代码为：

.error-notification,.error-text{color:red;}.error-text{font-size:24px;}.error-notification{border:1pxsolidred;padding:8px;}

这里的普通规定是选用，除非你想在mixin中经常使用一个参数，在这种状况下，只要才有效。

vue项目中直接用的audio标签，对样式进行修改并单独存放在一个css文件中 引用后页面每次刷新之后才会出现

style中可以import sass文件，css用得少，需要配置一下

在vue里面通过父组件如何修改子组件样式

下面我就为大家分享一篇vue里面父组件修改子组件样式的方法，具有很好的参考价值，希望对大家有所帮助。 在使用 vue 的开发中，我们有时会引用外部组件，包括 UI 组件（ElementUI、iview）。 当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。 但是在父组件中添加 scoped 之后，父组件的样式将不会渗透到子组件中，所以在父组件中书写子组件的样式是无效果的。 一、去掉 scoped在父组件的 <style> 中去掉 scoped 后，父组件中可以书写子组件的样式，但是你会担心这样会污染全局样式。 【因为我们知道正确使用全局样式的姿势是使用一个全局的 】二、混用本地和全局样式你可以在一个组件中同时使用有作用域和无作用域的样式：<style>/* 全局样式 */</style><style scoped>/* 本地样式 */</style>我们把 需要修改子组件的样式 写在上面那个全局样式里面三、使用深度作用选择器如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：<style scoped>.a >>> .b { /* ... */}</style>有些像 SASS 之类的预处理器无法正确解析 >>>。 这种情况下你可以用 /deep/ 操作符取而代之 —— 这是一个 >>> 的别名，同样可以正常工作。 OK，主要内容就是以上几点。 需要额外补充的是： 1、通过 v-html 创建的 DOM 内容不受作用域内的样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式2、CSS 作用域不能代替 class3、在递归组件中小心使用后代选择器上面是我整理给大家的，希望今后会对大家有帮助。 相关文章：在JS中命令模式概念与用法（详细教程）使用selenium抓取淘宝数据信息使用网络地图如何实现地图网格