Vue.js のスコープ モードでサブコンポーネントの内部ラベル スタイルを変更する方法

この記事では、Vue.js のスコープ モードでサブコンポーネントの内部ラベル スタイルを変更する方法を説明します。その内容は非常に優れており、困っている友人に役立つことを願っています。

Vue.js プロジェクトでは、通常、次のコードに示すように、scoped 属性を に scoped

を追加した結果です。

scoped を追加しないでください。この識別属性は生成されません。 この識別属性がもたらす利点の 1 つは、コンポーネント内のスタイルが他のコンポーネントのラベルに影響を与えないことです。my-comp コンポーネントに次のスタイルを記述した場合を想像してください:

<template>
  <p class="my-comp">
    <span>my comp</span>
  </p>
</template>

<script>
  export default {
  }
</script>

<style scoped>
</style>

このスタイルです。他のコンポーネントに span タグがある場合、

scoped

を追加すると、最終的に生成されるスタイルは次のようになります:

<style>
  span {
    color: red;
  }
</style>

span[data- v-0a679ea0] ]

識別属性はコンポーネントに固有であるため、このスタイルは独自のコンポーネントのスパンにのみ適用されます。

コンポーネント A をコンポーネント B の中に配置した場合、この識別属性がどのように生成されるかを見てみましょう。

home.vue

<style scoped>
  span { color: red; }
</style>
//生成后如下
<style>
  span[data-v-0a679ea0] {
    color: red;
  }
</style>

生成されたHTMLコードは次のとおりです:

data-v-957c7522

は

home

コンポーネントの識別属性であり、この属性は持っていますコンポーネントのルートの

my -comp にも追加されていますが、
my-comp

の

span タグは data-v-957c7522 識別属性を追加しないことに注意してください。 はmy-compコンポーネント内のタグで、表示されていないものはhomeコンポーネント内に記述されます。 しかし、場合によっては、my-comp のタグを変更するためにホーム コンポーネントにスタイルを記述する必要がある場合があります。 以下のコードを見てください:

このコードはホームコンポーネントに属します

<template>
  <p class="home">
    <my-compo></my-compo>
  </p>
</template>

<script>
  import MyCompo from &#39;./my-comp&#39;
  export default {
    components: {MyCompo}
  }
</script>

<style scoped>
</style>

しかし、このコードは変更されません

my comp

のcolor は、このスタイルの最終生成された外観が次のようなものであるためです:

my-comp span
タグにはロゴがありません data-v-957c9522 属性。

この問題を解決するにはどうすればよいですか?

ホームコンポーネントのスコープを削除することで問題を解決できますが、これはお勧めできません。前述したように、この種のエラーはトラブルシューティングが非常に困難です。

less のようなスタイル言語を使用する場合は、非常に優れた解決策があります。次のコードを見てください:

<style scoped>
  .my-comp span {
    color: blue;
  }
</style>

最終的に生成されたスタイルがどのようになるかを見てみましょう。

identity 属性は span から .my-comp に移動されました。そのため、このスタイルは my-comp コンポーネントの内部 span タグに適切に適用でき、他のコンポーネントには影響しません。

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