Vue3 シングルファイルコンポーネントのスタイル機能の詳細な説明

スタイルスコープ

注意事項:

• スタイルは他のコンポーネントには影響せず、現在のコンポーネントにのみ有効になります。
• 子コンポーネントのルート要素は、親コンポーネントのスコープ スタイルと子コンポーネントのスコープ スタイルの両方の影響を受けます。これにより、親コンポーネントが子コンポーネントのレイアウトを調整できるようになります。
• 特別なセレクターが 3 つあります。

1. ディープセレクター: 子コンポーネントに影響を与える可能性があります。疑似クラス => :deep(cls: 影響を受けるセレクター) を使用します。

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

2. スロットセレクター: スロットコンテンツのスタイルに影響を与えます。疑似クラスを使用する => :slotted(selector)

    :sloted(.a) {
        ...
    }

3. グローバルセレクター: スタイルはグローバル環境に影響します。 疑似クラスを使用する => :global(selector)

    :sloted(.a) {
        ...
    }

スコープ付きスタイルはスタイルとともに存在できる

スタイルモジュール

スタイル タグにはモジュールが含まれています。そのスタイルは、スタイル スコープと同様に、現在のコンポーネントにのみスコープできます。

このメソッドは、CSS を CSS モジュールにコンパイルし、CSS スタイルを使用するためにコンポーネントの $styles オブジェクトに公開します。

<テンプレート>
  <p :class="$style.red">
    これは赤であるべきだ
  </p>
</テンプレート>

<スタイルモジュール>
。赤 {
  色: 赤;
}
</スタイル>

モジュールに値を割り当てて、公開されるオブジェクトの名前をカスタマイズできます

<テンプレート>
  <p :class="style.red">
    これは赤であるべきだ
  </p>
</テンプレート>

<スタイル モジュール = 'スタイル'>
。赤 {
  色: 赤;
}
</スタイル>

useCssModule() API を使用して、結合された API で cssModule を使用できます。

// デフォルトでは、<style module> useCssModule() のクラスを返します

// 名前を付けて、<style module="classes"> でクラスを返す useCssModule('classes')

状態駆動型動的CSS

v-bind() を使用して、CSS 値を動的コンポーネントの状態と関連付けることができます。

<テンプレート>
  <div class="text">こんにちは</div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      色: 「赤」
    }
  }
}
</スクリプト>

<スタイル>
。文章 {
  色: v-bind(色);
}
</スタイル>

要約する

これで、vue3 シングルファイル コンポーネントのスタイル機能に関するこの記事は終了です。vue3 シングルファイル コンポーネントのスタイル機能に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。