ディープ セレクターを使用した Vue スコープの解析

序文

Vue では、スコープを追加する役割は、現在のコンポーネント (スタイル) に対してのみ有用であることは誰もが知っています。

<style scoped>
</style>

ケース分析スコープの原則

Home.vue

<template>
  <div class="home">
    <h1>hello</h1>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
    
    
  name: 'Home',
  components: {
    
    
    HelloWorld
  }
}
</script>
<style scoped>
h1{
    
    
  color: red;
}
</style>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{
    
    {
    
     msg }}</h1>
  </div>
</template>
<script>
export default {
    
    
  name: 'HelloWorld',
  props: {
    
    
    msg: String
  }
}
</script>
<style scoped lang="less">
</style>

結果は次のとおりです

そのようなプロセスは、特定のコンポーネントに対して、スコープ属性がスタイルに追加される場合、data-v-xxx のカスタム属性が現在のサブコンポーネントの構造に追加されるというものです。属性

セレクターを使用する必要がある 要素にスタイルを追加する
上記の結果に基づいて簡単に見つけることができます。
親コンポーネントは、子コンポーネントのルート コンポーネントもレンダリングします。子コンポーネント HelloWorld.vue の構造を変更することもできます。

<template>
    <h1>{
    
    {
    
     msg }}</h1>
</template>

結果は

深度セレクター

親コンポーネントのスタイルが子コンポーネントのスタイルに影響を与えることを期待することがあります.まず、 style タグのスコープ属性Home.vue を直接削除する
ことを検討する必要があります.

<style>
h1{
    
    
  color: red;
}

その結果

、カスタム属性に従って要素を処理する代わりに、タグ名に従って日常的にスタイルが設定されます.

実際には、深い属性セレクターを使用できます.

深度属性セレクター

オリジナルCSS

>>>h1{
    
    
   color: red;
}

以下

/deep/ h1{
    
     
  color:red;
}

scss

::v-deep h1{
    
    
   color:red;
}

上記の 3 つすべてで、カスタム属性に依存してラベルのレンダリング スタイルを選択するという効果を得ることができます。