一緒に書く習慣をつけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加してからN日目です。クリックしてイベントの詳細をご覧ください。
序文
通常、開発プロセスではいくつかのUIコンポーネントライブラリを使用します。特に、Vueテクノロジースタックのフロントエンドの学生は、特にelement-uiの頻度が比較的高いです。これらのUIコンポーネントライブラリのデフォルトスタイルを変更することがよくあります。デプスセレクター、誰もがこれを知っています、なぜあなたは疑問に思ったことはありますか？家庭での流行を利用して、私はそれを調査し、ここで共有しました
スコープの使命と役割
これはvueのデモです。2ページです。1ページはNuggetsのタグで、もう1ページはvueのタグです。スコープを合わせた役割を見て、1つのページのタグに赤を追加してみましょう。さらに、以下に示すように、Oneはスタイルを追加せず、スコープ付きスタイルを使用しません。
はい、誰もが答えを知っている必要があります！2ページのリンクテキストが赤になりました。juejinページをクリックすると、ブラウザは現在のページのスタイルを自動的に導入し、githubをクリックすると、ブラウザはこのスタイルを再利用するため、 Vueは単一ページのアプリケーションであるため、リンクが赤に変わります。したがって、開く各ページのスタイルはグローバルスタイルにクリップされます。解決策は、スコープを追加することです。その後、タグの色が異なります。ページを開いて、ラベルの下（下）を表示します
現時点では、タグにもう1つのデータ（v-xxxxxxx ）があります。これはVueが追加するものです。Vueがこのプロジェクトをビルドすると、コンポーネントユニットを使用することが記載され、異なるコンポーネントの下にあるすべての要素が追加されます。 。コンポーネントIDに似たものを使用すると、一意の識別子が属性セレクターの形式で記述したスタイルでスプライスされます。それを確認しましょう（以下）
はい、スコープを追加した後、Vueはこの属性をこのスタイルの最後の段落に追加し、属性セレクターでこの要素を選択して要素スタイルを分離します。次に、スコープの副作用を見てみましょう。
スコープの副作用
今回は、スコープの副作用を検証するためにelement-uiを紹介します。ここではデモ（下記）を作成し、スコープもここで使用します。
要素を確認しましょう（下）
ここでの入力要素は、data-v-xxxxxxのように一意に識別されません
が、構築された後の独自のスタイル（my-Txt入力）はどのようになりますか？（次の図）
上の図に示すように、私たちが自分で書いたスタイルはこのユニークなロゴで接合されているため、どのように操作してもこの要素をヒットすることはできません。つまり、Vueはこのロゴをこの入力に追加しませんが、これは私たちの中にありますこのロゴはのスタイルに追加されますが、スコープを削除するとターゲットに到達できますが、これはお勧めできません。スタイルは統一されたスタイルにパッケージ化されます。これはスコープの副作用です。 、それではどうすればそれを解決できますか？スタイルの浸透
スタイルの浸透（:: v-deep）
目標を達成するためにスタイルの浸透を追加します
<style scoped>
.my-Txt {
width: 200px;
}
.my-Txt ::v-deep input {
background-color: pink;
}
</style>
复制代码このとき、ビルドされたスタイルのVueがどのように処理されるかを見てみましょう（以下）
この一意の識別子は入力の後ろからmy-Txtの後ろまで実行されます。つまり、この:: v-deepを追加しない場合、Vueは常に最後の段落でこの一意の識別子を接続します。私たちが書くスタイルの、この一意の識別子の位置を変更したい場合は、スタイルの浸透を使用して指定する必要があります。上の図は、この一意の識別子my-Txtを持つ要素を意味し、その子要素の入力が適用されますこのスタイル、そして私たちが書いたmy-Txtにも、上の図からわかるように、この一意の識別子があります
要約する
複数ページのアプリケーションのさまざまなコンポーネントでのスタイル分離の問題を解決するために、Vueはスコープスタイルの概念を導入していますが、Vueはすべての要素に一意の識別子を追加しないため、この要素にヒットできない場合は、この一意の識別子がスプライスされるcssスタイルのセクションを指定するためのスタイルペネトレーション！！！
人は静かに学ぶ必要があり、人は学ぶ必要があります。売春と遅さは精液を助長することはできず、焦りはセクシュアリティを治すことはできません。何年も何年もギャロップ、意味と太陽が行き、そして枯れていく