Vue におけるスコープ付き実装の原則とスタイル浸透の方法と原則

1. スコープとは何ですか? なぜそれを使用する必要があるのですか?

vue ファイルの style タグには、scoped という特別な属性があります。

style タグにスコープ属性がある場合、その CSS スタイルは現在のコンポーネントにのみ適用でき、この属性を通じてコンポーネント間のスタイルが互いに混入するのを防ぐことができます。

2. スコープの原則

コンポーネントインスタンスの一意の識別子を生成し、コンポーネント内の各ラベルに対応する DOM 要素に label 属性を追加し、 data-v-xxxx を
使用して

3. 例

翻訳前の V コード

<template>
	<div class="example">hello world</div>
</template>

<style scoped>
.example {
	color: red;
}
</style>

翻訳後:

<template>
	<div class="example" data-v-49729759>hello world</div>
</template>

<style scoped>
.example[data-v-49729759] {
	color: red;
}
</style>

4. スコープを指定して侵入する必要があるのはなぜですか?

サードパーティコンポーネントを参照した後、スコープ属性を削除したりコンポーネント間でスタイルの汚染を引き起こしたりすることなく、コンポーネント内のサードパーティコンポーネントのスタイルをローカルに変更する必要があります。現時点では、スコープ付きは特別な方法でのみ侵入できます。

5. スタイルの浸透方法

スタイルペネトレーションを記述するには、>>>、/deep/、::v-deep の 3 つの方法があります。

>>>

プロジェクトが CSS ネイティブスタイルを使用している場合は、>>> 貫通変更を直接使用できます。

/*  用法：  */
div >>> .cla {
	color: red;
}

/深い/

プロジェクトではプリプロセッサ scss、sass、less 演算子 >>> が使用されており、コンパイルできないためエラーが報告される場合があります。/deep/ を使用できます
。注: vue-cli3 以降は使用できません。

/*  用法：  */
div /deep/ .cla {
	color: red;
}

::v-ディープ

/*  用法：  */
div ::v-deep .cla {
	color: red;
}

6. スタイル浸透の原則

スコープ後のセレクターは、デフォルトで現在のコンポーネントのロゴを追加します。たとえば、
[data-v-49729759] でスタイル貫通を使用した後、ディープの後のセレクターは最後にロゴを追加しません。

例

親コンポーネント:

<template>
  <div class="cssdeep">
    <!-- 样式穿透 -->
    <cssdeepcom></cssdeepcom>
  </div>
</template>

<script>
import cssdeepcom from '../components/cssdeepcom'
export default {
  data(){
    return{

    }
  },
  components:{
    cssdeepcom,
  },
}
</script>

<style lang="less" scoped>
.cssdeep /deep/ .cssdeepcom{
  background: blue;
}
</style>

サブアセンブリ:

<template>
  <div class="cssdeepcom"></div>
</template>

<script>
export default {
  data(){
    return{

    }
  },
}
</script>

<style lang="less" scoped>
.cssdeepcom{
  width: 100px;
  height: 100px;
  background: red;
}
</style>

親コンポーネントがペネトレーションを使用すると、識別子 [data-v-xxxx] の後に cssdeepcom が続かず、親コンポーネントの識別子が deep の上位レベルの末尾に続きます。