vue less認識を使用したscopedプロパティ

scopedはstyleが現在のものにのみ作用することを実現することができる.vueファイル【scoped=>訳:審査し、よく研究する(scopeの過去式と過去分詞形式);

<template>
  <div class="user">div>
template>
<script>

script>

<style lang='less' scoped>
.user {
  color:#333;
}
style>

上のファイルでレンダリングされたdom構造はこうなります

<div data-v-53795c54 class="user">div>

そしてレンダリングされたcssスタイルはこうです.

.user[data-v-53795c54] {
  color:#333;
}

サブコンポーネントにscopedを追加する場合、同様に、サブコンポーネントもscopedで識別されている場合、親コンポーネントではサブコンポーネントのノードを設定できません.親コンポーネントにscopedがある場合、サブコンポーネントが設定されていない場合も、親コンポーネントにサブコンポーネントのノードのスタイルを設定することはできません.親コンポーネントがscopedを使用しているため、親コンポーネントのstyle設定のスタイルは一意であり、他のコンポーネントスタイルとは作用しません.