#javascript #vue.js
#javascript #vue.js
Вопрос:
Это скорее общий вопрос, касающийся 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 автоматически генерирует дополнительные имена классов для стилей с ограниченной областью действия, означает ли это, что стили для обоих компонентов повторяются каждый раз, когда компонент используется с их собственным классом, или он будет повторно использовать один и тот же стиль?
Комментарии:
1. я думаю, что стили обычно извлекаются в файлы css, поэтому они используются повторно, но они могут отличаться в зависимости от того, как вы упаковываете.