Javascript Vue.js作用域样式

这与其说是一个问题，倒不如说是一个关于证监会范围风格的一般性问题

假设我们有一个子组件，它只是输入元素的包装器：

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

<script>
  export default {}
</script>

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

导出默认值{}
.输入{
宽度：100%
高度：40px；
}

在父组件中，我们有一个重复输入组件的表单：

<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>

从“./InputComponent.vue”导入InputComponent
导出默认值{
组件：{InputComponent}
}

---

由于Vue.js会自动为作用域样式生成额外的类名，这是否意味着每次将组件与它们自己的类一起使用时，这两个组件的样式都会重复，还是会重复使用相同的样式？

我认为样式通常会提取到css文件中，以便重复使用，但这可能会根据您的打包方式有所不同。