vue スタイルの浸透::v-deep の具体的な使用法

この記事では主にvueスタイルのpenetration::v-deepの具体的な使い方を紹介しています｡サンプルコードを通して詳しく紹介しています｡あらゆる人の勉強や仕事に役立つ学習価値があります｡必要な友達は下記のエディタをフォローしてください｡来てください｡そして一緒に勉強する

以前プロジェクトで使用したことがありますelement UIが、非常に使いやすく、コンポーネントが豊富に揃っています。この場合でも、プロジェクト内で独自のアプリケーションを構築するには追加のスタイルを使用する必要があります。に直接記述すると<style lang="scss" scoped> .... </style>、現在のコンポーネント内のスタイルにのみ影響しますが、削除するとscopedグローバルスタイルに影響します。

多くの方法を試しましたが、良い解決策が得られませんでした。結局、公式ドキュメントを読んで解決しました。実際、公式ドキュメントにはすでに解決策が記載されていますが、ドキュメントをよく読んでいなかったことと、Vue に十分慣れていなかったことを自分が責めています。

深度アクションセレクター

scopedスタイル内のセレクターを「より深く」機能させたい場合(たとえば、子コンポーネントに影響を与える場合)、>>>演算子を使用できます。

<style scoped> 
.a >>> .b { /* ... */ } </style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* … */ }

一部のSassプリプロセッサは、それを正しく解析できません>>>。この場合、代わりに/deep/or演算子を使用できます。どちらものエイリアスであり、同様に機能します。::v-deep>>>

例えば：

>>>1vue のスタイルが CSS を使用している場合、

<style lang="css" scoped>
.a >>> .b { 
 /* ... */
}
</style>

ただし、scss などのプリプロセッサは >>> を解析できないため、次の方法を使用します。

2/deep/

<style lang="scss" scoped>
.a{
 /deep/ .b { 
  /* ... */
 }
} 
</style>

ただし、一部の開発者は、vue-cli3 をコンパイルするときにディープメソッドがエラーまたは警告を報告すると報告しました。この時点で、3 番目の方法を使用できます。

3::v-deep二重コロンである必要があることに注意してください

<style lang="scss" scoped>
.a{
 ::v-deep .b { 
  /* ... */
 }
} 
</style>

使用シナリオ:でスタイルを
オーバーライドする必要がある場合、深さアクションセレクターのみを使用できます。セレクターがの場合、記述方法は次のようになります。element-uistylecss

.a >>> .b {
 ***
}

Style は CSS プリプロセッサ (less、sass、scss) を使用して次のように記述します。

// 第一种/deep/
/deep/ .a {
 ***
}

// 第二种::v-deep
::v-deep .a{
 ***
}

2 番目の方法を使用することをお勧めします。/deep/ は、ある時点でエラーを報告します。::v-deep の方が安全で、コンパイルが高速です。

注: 動的に生成されたコンテンツは、次`scoped`の影響を受けません。

でv-html作成されたDOMコンテンツはスタイルの影響を受けませんが、引き続きスタイルを設定scopedできます。深度作用选择器 >>>

著者：Chen Xi
リンク：https://juejin.cn/post/6981341589763260430
出典：レアアースナゲット
著作権は著者に属します。商業転載の場合は作者に許可を、非商業転載の場合は出典を明記してください。