Vue のコンポーネント内のスタイルを分離する方法

Vue コンポーネントでのスタイルの分離は 4 つの方法で実現できます: スコープ スタイルを使用して分離されたスコープを作成します。 CSS モジュールを使用して、一意のクラス名を持つ CSS ファイルを生成します。モジュール性と再利用性を維持するために、BEM 規則を使用してクラス名を編成します。まれに、スタイルをコンポーネントに直接挿入できる場合がありますが、これはお勧めしません。

Vue コンポーネントでのスタイルの分離

スタイルの分離は、Vue アプリケーションを構築する際に、コンポーネントのスタイルが他のコンポーネントに影響を与えないようにし、予期しない動作やメンテナンスの問題を回避するために重要です。 Vue には、スタイルの分離を実現するためのいくつかの方法が用意されています。

1. スコープ スタイル

コンポーネント スタイルを分離するには、スコープ スタイルの使用が最も推奨されます。コンポーネントに対して分離されたスコープを作成し、そのコンポーネント内の要素のみに影響を与えます。スコープ付きスタイルは、コンポーネント テンプレートの scoped 属性を使用して有効にできます: scoped 属性，可以启用作用域样式：

<code class="html"><template scoped>
  <!-- 组件样式 -->
</template></code>

2. CSS Modules

CSS Modules 允许将 CSS 类名定义为本地作用域，仅在该组件中使用。webpack 等构建工具可以生成具有唯一类名的 CSS 文件。使用 CSS Modules 时，需要创建一个 CSS 文件并将其导入组件：

<code class="js">import styles from './component.module.css';

// 在模板中使用类名
<div class={styles.className}></div></code>

3. BEM（块-元素-修改器）约定

BEM 约定是一种组织 CSS 类名的方式，从而创建可重复使用、模块化的样式。它使用嵌套类名来表示组件的不同部分，例如块、元素和修改器。这可以帮助保持样式组织和隔离：

<code class="html"><div class="component">
  <div class="component__element"></div>
  <div class="component__element--modifier"></div>
</div></code>

4. 样式注入

在某些情况下，将样式直接注入组件的 <style>

<code class="html"><style>
  .component {
    /* 组件样式 */
  }
</style></code>

2. CSS モジュール

🎜🎜CSS モジュールでは、コンポーネント内でのみ CSS クラス名をローカル スコープとして定義できます。で使われる。 webpack などのビルド ツールは、一意のクラス名を持つ CSS ファイルを生成できます。 CSS モジュールを使用する場合は、CSS ファイルを作成してコンポーネントにインポートする必要があります: 🎜rrreee🎜🎜3. BEM (Block-Element-Modifier) 規​​約 🎜🎜🎜 BEM 規約は、CSS クラス名を整理する方法です。再利用可能なモジュール式スタイルを作成します。ネストされたクラス名を使用して、ブロック、要素、モディファイアなどのコンポーネントのさまざまな部分を表します。これは、スタイルを整理して分離するのに役立ちます: 🎜rrreee🎜🎜4. スタイルの挿入🎜🎜🎜場合によっては、コンポーネントの <style> ブロックにスタイルを直接挿入する必要がある場合があります。ただし、これは世界的な汚染につながる可能性があるため、推奨される方法ではありません。 🎜rrreee🎜 これらのメソッドを使用すると、Vue コンポーネントのスタイル分離を実現し、スタイルが他のコンポーネントに誤って影響を与えないようにして、アプリケーションの保守性と予測可能性を向上させることができます。 🎜

以上がVue のコンポーネント内のスタイルを分離する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。