Was sind die neuen Funktionen im Vue3-Stil und wie werden sie verwendet?

Neue Stilfunktionen

Vue3.2-Version hat viele Verbesserungen am Stil einzelner Dateikomponenten vorgenommen, wie z. B. lokale Stile, CSS-Variablen und Stile, die für Vorlagen verfügbar gemacht werden. (Lernvideo-Sharing: Vue-Video-Tutorial)

1. Teilweiser Stil

Wenn das <style>-Tag das Attribut scoped hat, ist nur sein CSS vorhanden Auf die Elemente der aktuellen Komponente angewendet: <style> 标签带有 scoped attribute 的时候，它的 CSS 只会应用到当前组件的元素上：

<template>
  <div class="example">hi</div>
</template>
 
<style scoped>
.example {
  color: red;
}
</style>

二、深度选择器

处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类：

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

通过 v-html 创建的 DOM 内容不会被作用域样式影响，但你仍然可以使用深度选择器来设置其样式。

三、插槽选择器

默认情况下，作用域样式不会影响到 <slot/> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以确切地将插槽内容作为选择器的目标：

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

四、全局选择器

如果想让其中一个样式规则应用到全局，比起另外创建一个 <style>，可以使用 :global 伪类来实现：

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

五、混合使用局部与全局样式

你也可以在同一个组件中同时包含作用域样式和非作用域样式：

<style>
/* global styles */
</style>
 
<style scoped>
/* local styles */
</style>

六、支持CSS Modules

<style module> 标签会被编译为 CSS Modules 并且将生成的 CSS 类键暴露给组件：

1、 默认以$style 对象暴露给组件；

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>
 
<style module>
.red {
  color: red;
}
</style>

2、可以自定义注入module名称

<template>
  <p :class="classes.red">red</p>
</template>
 
<style module="classes">
.red {
  color: red;
}
</style>

七、与setup一同使用

注入的类可以通过 useCssModule API 在 setup() 和 <script setup> 中使用：

<script setup>
import { useCssModule } from &#39;vue&#39;
 
// 默认, 返回 <style module> 中的类
const defaultStyle = useCssModule()
 
// 命名, 返回 <style module="classes"> 中的类
const classesStyle = useCssModule(&#39;classes&#39;)
</script>

八、动态 CSS

单文件组件的 <style> 标签可以通过 v-bind

<script setup>
const theme = {
  color: &#39;red&#39;
}
</script>
 
<template>
  <p>hello</p>
</template>
 
<style scoped>
p {
  color: v-bind(&#39;theme.color&#39;);
}
</style>

🎜 2. Tiefenselektor 🎜🎜🎜 Wenn der Selektor im scoped-Stil eine „tiefere“ Auswahl treffen möchte, heißt das: Einfluss erreichen Unterkomponenten können Sie die Pseudoklasse :deep() verwenden: 🎜rrreee

🎜Der über v-html erstellte DOM-Inhalt wird vom Bereichsstil nicht beeinflusst . Sie können es aber trotzdem mit der Tiefenauswahl stylen. 🎜

🎜🎜3. Slot-Selektor🎜🎜🎜Standardmäßig wirken sich Bereichsstile nicht auf den von <slot/> gerenderten Inhalt aus, da sie als gehalten und übergeben werden die übergeordnete Komponente. Verwenden Sie die Pseudoklasse :slotted, um den Slot-Inhalt genau als Selektor auszuwählen: 🎜rrreee🎜🎜 Viertens, globaler Selektor 🎜🎜🎜 Wenn Sie möchten, dass eine der Stilregeln global angewendet wird, dann zusätzlich , erstellen Sie einen <style>, der mit der Pseudoklasse :global implementiert werden kann: 🎜rrreee🎜🎜5. Mischen Sie lokale und globale Stile🎜🎜🎜Sie können Außerdem enthält dieselbe Komponente sowohl Stile mit Gültigkeitsbereich als auch Stile ohne Gültigkeitsbereich: 🎜rrreee🎜🎜6. Unterstützte CSS-Module🎜🎜🎜<style module>-Tags werden in CSS-Module kompiliert und CSS-Klassenschlüssel generiert sind für Komponenten verfügbar: 🎜🎜1. Standardmäßig werden sie für Komponenten als $style-Objekte verfügbar gemacht. 🎜rrreee🎜rrreee🎜7 es mit setup🎜🎜 🎜Die injizierte Klasse kann in setup() und <script setup> über die useCssModule-API verwendet werden: 🎜rrreee🎜🎜8 🎜Einzelne Dateikomponente Das <style>-Tag kann CSS-Werte dynamischen Komponentenzuständen über die CSS-Funktion v-bind zuordnen: 🎜rrreee

Das obige ist der detaillierte Inhalt vonWas sind die neuen Funktionen im Vue3-Stil und wie werden sie verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!