Vueの親コンポーネントを通じてサブコンポーネントのスタイルを変更する方法

ここで、Vue で親コンポーネントから子コンポーネントのスタイルを変更する方法に関する記事を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

vueを使用した開発では、UIコンポーネント(ElementUI、iview)を含む外部コンポーネントを参照することがあります。

c9ccee2e6ea535a969eb3f532ad9fe89 タグにスコープ属性がある場合、その CSS は現在のコンポーネント内の要素にのみ適用されます。

しかし、親コンポーネントにスコープ付きを追加した後は、親コンポーネントのスタイルが子コンポーネントに浸透しないため、親コンポーネントに子コンポーネントのスタイルを書いても効果はありません。

1. スコープ付きを削除します

親コンポーネントの c9ccee2e6ea535a969eb3f532ad9fe89 からスコープ付きを削除した後、子コンポーネントのスタイルを親コンポーネントに記述することができますが、これによりグローバル コンポーネントが汚染されるのではないかと心配になります。スタイル。

【グローバル スタイルを使用する正しい方法は、グローバル app.css を使用することであるとわかっているためです】

2. ローカル スタイルとグローバル スタイルを混合する

コンポーネント ドメインでは、スコープ付きスタイルとスコープなしスタイルの両方を使用できます。 style:

<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>

上記のグローバル スタイルのサブコンポーネントで変更する必要があるスタイルを記述します

3. ディープ アクション セレクターを使用します

スコープ付きスタイルのセレクターを機能させたい場合は、サブコンポーネントに影響を与えるなど、「より深く」するには、 >>> 演算子を使用できます。

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

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

OK、主な内容は上記の点です。

追加する必要があるものは次のとおりです:

1. v-html を通じて作成された DOM コンテンツはスコープ内のスタイルの影響を受けませんが、ディープ アクション セレクターを通じてスタイルを設定することができます

2. CSS スコープはクラスを置き換えることはできません

3. 再帰コンポーネントでは子孫セレクターを慎重に使用してください

上記は、将来すべての人に役立つことを願ってまとめたものです。

関連記事:

JSでのコマンドモードの概念と使用法(詳細なチュートリアル)

Seleniumを使用して淘宝データ情報を取得する

Baidu Mapを使用してマップグリッドを実装する方法

以上がVueの親コンポーネントを通じてサブコンポーネントのスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。