Vue.js ::v-deep、>>>、および Deep セレクターが機能しないのはなぜですか?

>> とディープ セレクターは機能しますか? " />

Vue.js ::v-deep、>>> およびディープ セレクターのトラブルシューティング

バックグラウンド

Vue.js ::v-deep のような深いセレクターを使用して、ネストされたコンポーネント内の要素をスタイル設定する方法を提供します。 >>> および :deep ただし、これらのセレクターを実装すると問題が発生します。

問題

::v-deep または > を使用しようとしています。 ;>> Vue コンポーネント内から子要素をターゲットにしても、スタイル ルールはそのまま渡されます。

解決策

Vue 2.0 - 2.6

Sass: ::v-deep を使用します

::v-deep .child-class {
  background-color: #000;
}

なしSass: >>>

>>> .child-class {
  background-color: #000;
}

コンポーネントの

<style scoped></style>

Vue 3 (および Vue 2.7)

使用する:deep(.child-class)

:deep(.child-class) {
  background-color: #000;
}

Vue 3 の新しいセレクター

さらに、Vue 3 は以下を提供します:

• スロット コンテンツ: 使用:slotted(.child-class)
• グローバル スタイル: :global(.my-class)

を使用します。ここでも、

<style scoped></style>

Webpack構成

Vue Loader を使用している場合は、次の構成が含まれていることを確認してください。

{
  test: /\.vue$/,
  use: 'vue-loader',
}

概要

Vue 2:

• Sass で ::v-deep を使用します。 >>> Sass なし

Vue 3:

• Use :deep(.child-class)
• The ::v-プレフィックスは非推奨です
• :slotted と :global を使用してください必要に応じてセレクター

注: /deep/ 構文は V​​ue 2 と 3 の両方で非推奨です。

以上がVue.js ::v-deep、>>>、および Deep セレクターが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。