vueの中のscopedスタイルのスコープのルールを詳しく説明します。

はあ！皆さん、こんにちは私はパパイヤの香りです。今日はvueのスタイルスコープの問題について話をします。通常、私達がプロジェクトを開発する時はstyleにscopedを加えて規定のコンポーネントの役割領域の効果を果たすので、彼らのルールを知る必要があります。あなたのプロジェクトのスタイルがどうやって運営されているかをもっとはっきり知ることができます。
まず、実現方法を説明します。
vueの中のスタイルスコープは属性セレクタによって実現されます。例えば同じクラス名のように、. [ ]によって区別されます。ここでは主にここの属性名はどのように割り当てられているかを確認します。
スタイルスコープ規則
次に状況によってスタイルのスコープを説明します。
スタイルのスコープがあるコンポーネントについては、このコンポーネントのすべての後裔要素は同じスコープ属性を備えていますが、このコンポーネントの内部のルート要素は、現在のコンポーネントのスコープ属性に加えて、その親レベルのコンポーネントのスコープも備えています。もちろん、親レベルがスコープがない場合は、スタイルのスコープがないコンポーネントは備えられていません。このコンポーネントは、ルート要素のみが親グループの価格を引き継ぐ役割ドメインであり、その後代の要素は同じレベルのコンポーネントに対して機能領域がないため、その役割領域は同じであり、次の世代から区別される。特に注意すべきことは、コンポーネントの多重化についてであり、現在のエントリでは、どの階層であれ、多重化されたコンポーネントの役割領域も同じである。
パターンスコープ図

実際の応用効果
基本的な様式の役割領域知識が準備されてから、最後にどのようにしてこのスタイルのスコープをセレクタに適用しますか？
単一のセレクタ.box[data-v-abc]のための複合セレクタ：.box a[data-v-abc] .box[data-v-abc],.wrap[data-v-abc] .box > div[data-v-abc]上記の知識によれば、コンポーネントが一度だけ引用されると、通常はパターン干渉がないことが分かりますが、一つのコンポーネントが一つのページで何度も多重化されると、依然としてパターン干渉の可能性があります。
PS：次はvueの中のscopedの原理を見ます。
vueにおけるscopedの役割：
コンポーネントの私有化を実現し、現在のスタイル属性は現在のモジュールにのみ属します。
しかし、公共のコンポーネントを使うと、多くの困難が発生します。
scopedの実現原理：
DOM構造において、vueはDOM構造およびcssスタイルに一意のマークを付けて、スタイルの私有化を達成し、全体の役割を汚染しないことが分かった。


scopedを加えた後のコンポーネントの中の多くのdata-v-5 db 9451 aの属性が見られます。cssスタイルで見られます。
1.DOMノードに重複しない属性を追加するdata-v-5 db 9451 aは一意性を示す。
2.各スタイルを選択した後、「属性を重複させない」というフィールドを追加します。
3.コンポーネントの内部にコンポーネントがある場合、一番外側のコンポーネントのラベルに唯一の属性フィールドを加え、コンポーネントの内部参照のコンポーネントに影響を与えない。
慎重に使う:
1.親コンポーネントにはscoped属性がなく、サブアセンブリにはscopedがあり、親コンポーネントはサブアセンブリを操作できない。
2.親コンポーネントにはscoped属性があり、サブアセンブリにはscopedがありません。親コンポーネントにはサブアセンブリのパターンが設定できません。親コンポーネントのすべてのラベルにはdata-v-5 db 9451 aの一意のフラグが付いていますが、サブアセンブリにはこの一意のフラグ属性が付いていません。
3.親子で構成していますが、同じようにデザインを設定することもできません。変更するとコード量が増えます。
締め括りをつける
ここでvueの中のscopedスタイルのドメインのルールについての記事を紹介します。vue scopedスタイルに関する領域の内容は以前の文章を検索したり、以下の関連記事を見たりしてください。これからもよろしくお願いします。