Vue でのスコープ付き使用ステップ分析

今回は、Vue でスコープを使用するための手順の分析をお届けします。Vue でスコープを使用する場合の 注意点とは何ですか。実際のケースを見てみましょう。

スコープとは何ですか?

vue ファイルの style タグには、scoped という特別な属性があります。 style タグにスコープ属性がある場合、その CSS スタイルは現在のコンポーネントにのみ適用できます。つまり、スタイルは現在のコンポーネント要素にのみ適用できます。この属性により、コンポーネント間のスタイルが互いに混入するのを防ぐことができます。プロジェクト内のすべてのスタイルタグがスコープ化されている場合、それはスタイル

モジュール化を実現することと同じです。

scoped の実装原理

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

<style scoped>
.example {
 color: red;
}
</style>
<template>
 <p class="example">hi</p>
</template>

翻訳後:

<style>
.example[data-v-5558831a] {
 color: red;
}
</style>
<template>
 <p class="example" data-v-5558831a>hi</p>
</template>

つまり: PostCSS。コンポーネントに一意の動的属性をすべての dom に追加し、対応する

属性セレクター を CSS セレクター に追加して、コンポーネント内の dom を選択します。この方法では、この属性を含む dom にのみスタイルが適用されます。 —— コンポーネントの内部ドーム。

なぜスコープ付きで侵入する必要があるのですか?

スコープは美しく見えますが、多くのプロジェクトでは、サードパーティコンポーネントを

参照し、サードパーティコンポーネントのスタイルをスコープを削除せずにコンポーネント内でローカルに変更する必要がある状況が発生します。属性はコンポーネント間のスタイル汚染を引き起こします。現時点では、スコープ付きは特別な方法を介してのみ侵入できます。

<style scoped>
 外层 >>> 第三方组件 {
  样式
 }
</style>

>>> を使用すると、スコープ付き属性を使用するときに、スコープ内に侵入して他のコンポーネントの値を変更できます。

曲線を通して国を救う方法

実際、曲線を通して国を救う方法もあります。つまり、スコープ付き属性を含むスタイルタグを定義することに加えて、スコープ付き属性のない style タグ、つまり vue コンポーネントでグローバル スタイル タグを定義する場合、スコープ付きのスタイル タグ:

<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>

現時点では、サードパーティのスタイルを変更する CSS を記述するだけで済みます。最初のスタイル。

個人的におすすめの方法

上記の2つの方法、貫通メソッドは実際にスコープ属性の意味に違反しており、カーブセーブメソッドはコードが醜くなりすぎます。

個人的には 3 番目の方法をお勧めします。つまり、scoped は見た目は美しく見えますが、多くの落とし穴があるため、scoped 属性を使用せず、外部 dom に一意のクラスを追加してさまざまなコンポーネントを区別することはお勧めできません。この方法では、スコープ付きと同様の効果が得られるだけでなく、さまざまなサードパーティ コンポーネントのスタイルの変更も容易になり、コードは比較的快適に見えます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

webpack を使用して React 開発環境を構築する手順の詳細な説明

npm モジュールのインストールと削除の手順の詳細な説明

以上がVue でのスコープ付き使用ステップ分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。