Блог

Это скорее общий вопрос, касающийся scoped styling SFC, чем проблема.

Допустим, у нас есть дочерний компонент, который является просто оболочкой для элемента ввода:

 <template>
    <div>
       <input class="input" type="text" />
    </div>
</template>

<script>
  export default {}
</script>

<style scoped>
.input {
   width: 100%
   height: 40px;
}
</style>
  

В родительском компоненте у нас есть форма, в которой повторяется наш входной компонент:

 <template>
    <div>
       <form>
         <div>
           <input-component />
         </div>
         <div>
           <input-component />
         </div>
       </form>
    </div>
</template>

<script>
  import InputComponent from './InputComponent.vue'

  export default {
     components: { InputComponent }
  }
</script>
  

Поскольку Vue.js автоматически генерирует дополнительные имена классов для стилей с ограниченной областью действия, означает ли это, что стили для обоих компонентов повторяются каждый раз, когда компонент используется с их собственным классом, или он будет повторно использовать один и тот же стиль?