ここで、Vue で親コンポーネントから子コンポーネントのスタイルを変更する方法に関する記事を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。 vueを使用した開発では、UIコンポーネント(ElementUI、iview)を含む外部コンポーネントを参照することがあります。 タグにスコープ属性がある場合、その CSS は現在のコンポーネント内の要素にのみ適用されます。 </p> <p>しかし、親コンポーネントにスコープ付きを追加した後は、親コンポーネントのスタイルが子コンポーネントに浸透しないため、親コンポーネントに子コンポーネントのスタイルを書いても効果はありません。 </p> <p><span style="color: #ff0000"><strong> 1. スコープ付きを削除します</strong></span></p> <p>親コンポーネントの <style> からスコープ付きを削除した後、子コンポーネントのスタイルを親コンポーネントに記述することができますが、これによりグローバル コンポーネントが汚染されるのではないかと心配になります。スタイル。 </p> <p>【グローバル スタイルを使用する正しい方法は、グローバル app.css を使用することであるとわかっているためです】</p> <p><span style="color: #ff0000"><strong>2. ローカル スタイルとグローバル スタイルを混合する</strong></span></p> <p>コンポーネント ドメインでは、スコープ付きスタイルとスコープなしスタイルの両方を使用できます。 style: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><style> /* 全局样式 */ /* 本地样式 */ ログイン後にコピー上記のグローバル スタイルのサブコンポーネントで変更する必要があるスタイルを記述します3. ディープ アクション セレクターを使用しますスコープ付きスタイルのセレクターを機能させたい場合は、サブコンポーネントに影響を与えるなど、「より深く」するには、 >>> 演算子を使用できます。 .a >>> .b { /* ... */ } ログイン後にコピー SASS などの一部のプリプロセッサは >>> を正しく解析できません。この場合、代わりに /deep/ 演算子を使用できます。これは >>> のエイリアスであり、同様に機能します。 OK、主な内容は上記の点です。 追加する必要があるものは次のとおりです: 1. v-html を通じて作成された DOM コンテンツはスコープ内のスタイルの影響を受けませんが、ディープ アクション セレクターを通じてスタイルを設定することができます 2. CSS スコープはクラスを置き換えることはできません 3. 再帰コンポーネントでは子孫セレクターを慎重に使用してください 上記は、将来すべての人に役立つことを願ってまとめたものです。 関連記事: JSでのコマンドモードの概念と使用法(詳細なチュートリアル) Seleniumを使用して淘宝データ情報を取得する Baidu Mapを使用してマップグリッドを実装する方法
