Vuetify 구성 요소에 대한 래퍼 구성 요소 생성

Vuetify은 Vue.js용으로 가장 많이 사용되는 고급 UI 구성요소 프레임워크 중 하나입니다. Google Material Design을 기반으로 하며 광범위한 고품질 사전 제작 구성 요소를 제공하므로 기능적이고 액세스 가능하며 미학적으로 만족스러운 웹 앱을 즉시 빌드할 수 있습니다.

Vuetify의 내장 스타일이 훌륭하지만 프로젝트에 다른 스타일이 필요하거나 원하는 대로 Vuetify 구성 요소를 사용자 정의하고 싶을 수 있습니다.

구조에 대한 Vue 래퍼 구성 요소!

래퍼 구성 요소

래퍼 구성 요소는 일부 사용자 지정 기능, 스타일 또는 기타 항목을 실제로 추가하기 위해 기본 요소 또는 다른 구성 요소를 "래핑"(따라서 이름)하는 사용자 지정 구성 요소입니다.

래퍼 구성 요소는 반복해야 하는 기능 및/또는 스타일을 캡슐화하여 코드베이스DRY를 유지하는 좋은 방법입니다.

래퍼 구성 요소의 장점 중 일부는 다음과 같습니다.

응용 프로그램의 서로 다른 부분 간의 일관성.

복사/붙여넣기를 방지하여 개발이 간소화되었습니다.

번들 크기가 감소했습니다.

하나의 구성 요소 구현에서 다른 구현으로 더 쉽게 전환할 수 있도록 타사 구성 요소에서 응용 프로그램을 분리합니다.

유스케이스

이 경우 Vuetifyv-text-field 구성 요소에 대한 래퍼 구성 요소를 예로 들어 입력 위에 레이블을 배치하고 일부 기본 스타일도 설정합니다.

아래 그림에서:

왼쪽에는 기본 Vuetify 텍스트 필드가 있습니다.

오른쪽에는 래퍼 구성 요소를 사용하여 만들려는 사용자 정의 텍스트 필드가 표시됩니다.

이제 최종 결과가 어떻게 생겼는지 알았으니 코드를 살펴보겠습니다.

래퍼 구성 요소

<template>
  <div>
    <label>{{ label }}</label>
    <v-text-field v-bind="{ ...$attrs, ...commonAttrs }" v-on="$listeners">
      <template v-for="(_, scopedSlotName) in $scopedSlots" #[scopedSlotName]="slotData">
        <slot :name="scopedSlotName" v-bind="slotData" />
      </template>
      <template v-for="(_, slotName) in $slots" #[slotName]>
        <slot :name="slotName" />
      </template>
    </v-text-field>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    label: {
      type: String,
      default: ''
    }
  },
  computed: {
    commonAttrs() {
      return {
        label: '',
        persistentHint: true,
        outlined: true,
        dense: true,
        hideDetails: false,
        class: {
          'mt-1': this.$props.label
        }
      }
    }
  }
}
</script>

가장 중요한 부분의 분해.

속성 상속 비활성화

inheritAttrs: false

inheritAttrs를 false로 설정하면 v-text-field를 사용하여 모든 속성을 $attrs로 전달할 수 있습니다.

모든 부모 범위 속성 바인딩을 Vuetify 구성 요소에 바인딩합니다.

v-bind="{ ...$attrs, ...commonAttrs }"

이 경우에는 자체 속성과 병합$attrs도 합니다.

구성 요소의 모든 이벤트 리스너를 Vuetify 구성 요소로 전달합니다.

v-on="$listeners"

예를 들어 @click , @input 등과 같은 모든 이벤트 리스너는 Vuetify 구성 요소로 전파됩니다.

Vuetify 구성 요소에 slots를 전달합니다.

<template v-for="(_, scopedSlotName) in $scopedSlots" #[scopedSlotName]="slotData">
  <slot :name="scopedSlotName" v-bind="slotData" />
</template>
<template v-for="(_, slotName) in $slots" #[slotName]>
  <slot :name="slotName" />
</template>

Vuetify 구성 요소는 사용자 지정을 위한 슬롯을 제공하며 래퍼 구성 요소에서 Vuetify 구성 요소로 전달되기를 원합니다.

그게 전부입니다!
이제 "구성 요소 래퍼"기술을 사용하여 Vuetify 구성 요소를 확장하고 모듈식이며 전반적으로 더 체계화된 앱을 빌드할 수 있습니다.

이 CodeSandbox example 에서 사용된 코드를 볼 수 있습니다.