Vue でのスコープ付きの実装原理とスコープ付きペネトレーションの使用法 (コード付き)

この記事の内容は、Vue でのスコープ化の実装原理とスコープ化されたペネトレーションの使用法に関するものです。必要な方は参考にしていただければ幸いです。

1. スコープとは何ですか? Vue ファイルのスタイル タグにはスコープという特別な属性があります。スタイル タグにスコープ付き属性がある場合、その CSS スタイルは現在の Vue コンポーネントにのみ使用できるため、コンポーネントのスタイルが相互に汚染されません。プロジェクト内のすべてのスタイル タグにscoped属性を追加すると、スタイルのモジュール化を実現したことになります。

2.scoped の実装原理

Vue におけるscoped 属性の効果は、主に PostCss を通じて実現されます。以下は翻訳前のコードです:

<style>
    .example{
        color:red;
    }
</style>
<template>
    <div>scoped测试案例</div>
</template>

翻訳後:

.example[data-v-5558831a] {
  color: red;
}
<template>
    <div>scoped测试案例</div>
</template>

つまり: PostCSS はコンポーネント内のすべての DOM に一意の動的属性を追加し、対応する属性セレクターを CSS セレクターに追加してコンポーネントを選択します。このアプローチでは、スタイルがこの属性を含む dom 要素 (コンポーネント内の dom) にのみ適用されます。

概要: スコープ付きレンダリング ルール:

一意のデータ属性 (例: data-v-5558831a) を HTML dom ノードに追加して、この dom 要素を一意に識別します
各 CSS セレクターの最後に (コンパイル後に生成された CSS ステートメント)、現在のコンポーネントのデータ属性セレクター (例: [data-v-5558831a]) を追加して、スタイルをプライベート化します
3.scoped 貫通

scoped は Vue プロジェクトで適切に見えます当時、サードパーティ コンポーネント ライブラリを導入したとき (vue-awesome-swiper を使用してモバイル カルーセルを実装するなど)、スコープ属性を削除せずに、ローカル コンポーネント内のサードパーティ コンポーネント ライブラリのスタイルを変更する必要がありました。コンポーネント間でスタイルをオーバーライドします。現時点では、特別な方法でスコープを設定して侵入できます。

stylus のスタイル貫通には >>>

    外层 >>> 第三方组件 
        样式
        
   .wrapper >>> .swiper-pagination-bullet-active
    background: #fff

sass が使用され、less のスタイル貫通には /deep/

    外层 /deep/ 第三方组件 {
        样式
    }
    .wrapper /deep/ .swiper-pagination-bullet-active{
      background: #fff;
    }

が使用されます。 3. コンポーネント内のサードパーティ コンポーネント ライブラリのスタイルを変更するその他の方法

を使用する場合は、上で紹介しました。スコープ付き属性を使用すると、scopd ペネトレーションを通じてサードパーティ コンポーネント ライブラリ スタイルを導入する方法を変更できます。以下では、インポートされたサードパーティ コンポーネント ライブラリのスタイルを変更する他の方法を紹介します。 vue コンポーネント内で 2 つの style タグを使用します。1 つはscoped 属性を指定し、もう 1 つはscoped 属性を指定せずに、上書きする必要がある css スタイルを作成します。 style) ファイルを作成し、その中にオーバーライドを記述します。css スタイルは main.js エントリ ファイルに導入されています

おすすめ関連記事:

Vue でコンポーネントの切り替えを実装する 2 つの方法の紹介 (コード付き)

方法ノードサーバーは Douban データの取得 (コード) を実装します

以上がVue でのスコープ付きの実装原理とスコープ付きペネトレーションの使用法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。