vue3單文件組件中style特性的示例分析

這篇文章將為大家詳細講解有關vue3單文件組件中style特性的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

style scoped

需要注意的有：

• 樣式不會影響到其他組件，只會在當前組件生效。

• 子組件的根元素會同時 受父組件的作用域樣式，和子組件的作用域樣式影響. 這樣做的目的是讓父組件可以調整子組件的布局。

• 存在3個特殊的選擇器：

1. 深度選擇器：可以影響到子組件. 使用偽類 => :deep(cls: 影響的選擇器)

.a :deep(.b) {
        ...
    }

2. 插槽選擇器: 可以影響到插槽內容的樣式。使用偽類 => :slotted(選擇器)

:slloted(.a) {
        ...
    }

3. 全局選擇器: 是樣式影響到全局。 使用偽類 => :global(選擇器)

:slloted(.a) {
        ...
    }

scoped style 可以和 style同時存在

style module

style 標簽中帶有 module。其樣式和 style scoped一樣只能作用域于當前組件。

此方式會將css 編譯為 css modules.且暴露給組件$styles對象來使用css樣式

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

<style module>
.red {
  color: red;
}
</style>

可以給module賦值來自定義暴露的對象名稱

<template>
  <p :class="style.red">
    This should be red
  </p>
</template>

<style module='style'>
.red {
  color: red;
}
</style>

在組合式api中可以使用 useCssModule() api來使用cssModule.

// 默認, 返回 <style module> 中的類
useCssModule()

// 命名, 返回 <style module="classes"> 中的類
useCssModule('classes')

狀態驅動的動態css

可以使用 v-bind() 來將css值關聯到動態的組件狀態上

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

關于“vue3單文件組件中style特性的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。