vue3單文件組件中style特性的深入講解

Posted on by

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特性的文章就介紹到這瞭,更多相關vue3單文件組件style特性內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：