Vue.js 3의 투명한 입력 래퍼

투명 래퍼 구성 요소는 프론트엔드 개발에서 가장 일반적으로 사용되는 패턴 중 하나입니다. 복잡성을 숨기고 양식 컨트롤의 모양과 느낌을 표준화하여 레이블, 유효성 검사 메시지 등과 같은 주변 요소가 앱 전체에서 정확하고 일관되게 표시되도록 하는 좋은 방법입니다.

속성, 이벤트 리스너 및 양방향 바인딩이 투명하게 통과할 수 있도록 래퍼 구성 요소가 기본 요소에 최대한 가깝게 작동하기를 원합니다.

두 가지 변형을 사용하여 Vue.js 3으로 구현하는 방법을 살펴보겠습니다. 예를 들어 레이블이 있는 입력 텍스트 래퍼의 간단한 버전을 사용하겠습니다.

변형 1: :value 및 @input 사용

<template>
  <label>{{ label }}</label>
  <input
    type="text"
    :value="modelValue"
    v-bind="$attrs"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  name: 'InputWrapper',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue']
};
</script>

다음을 통해 훨씬 더 단순화할 수 있습니다.

이름 속성 제거

목록 소품을 Array의 Strings으로

emits 속성

생략

그러나 우리는 여기에서 모범 사례를 고수하고 있습니다.

이 입력 래퍼 구성 요소는 이제 다음과 같이 간단히 사용할 수 있습니다.

<input-wrapper v-model="myValue" label="My label" />

여기서 주의할 사항:

구성 요소가 기본 요소처럼 느껴지도록 하기 위해 v-model을 사용하여 양방향 데이터 바인딩을 구현하고 Vue.js 3의 사용자 지정 구성 요소에 대해 new syntax을 사용합니다. 그렇게 하기 위해 입력 값을 다음으로 바인딩합니다. modelValue prop이고 입력 변경 시 update:modelValue 이벤트를 내보냅니다.

우리는 모든 non-prop attributes과 이벤트 리스너를 v-bind="$attrs"을 사용하여 입력에 전달합니다. 템플릿에 루트 요소가 없기 때문에 이를 명시적으로 정의해야 Vue가 상속되기를 원하는 요소를 알 수 없습니다. 여러 루트 노드가 있는 구성 요소를 만들었기 때문에 inheritAttrs 속성을 false 으로 설정할 필요가 없다는 점도 주목할 가치가 있습니다.

변형 2: v-모델 및 계산된 구성 API 사용

<template>
  <label>{{ label }}</label>
  <input v-model="localValue" type="text" v-bind="$attrs" />
</template>

<script>
import { computed } from 'vue';

export default {
  name: 'InputWrapperComputed',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue'],
  setup(props, context) {
    const localValue = computed({
      get: () => props.modelValue,
      set: (value) => context.emit('update:modelValue', value)
    });
    return {
      localValue
    };
  }
};
</script>

이 변형에서는 래퍼 구성 요소의 입력에 v-model을 사용합니다. getter와 setter이 있는 특수 계산 속성을 사용하여 파생된 값을 읽을 수 있을 뿐만 아니라 새 값도 할당할 수 있습니다.
값이 변경되면 setter가 호출되고 새 값을 부모에게 다시 내보냅니다.

예

이 CodeSandbox에서 속성, 이벤트 리스너 및 양방향 바인딩의 통과뿐만 아니라 두 변형의 라이브 예를 찾을 수 있습니다.

결론

Vue.js 3은 초기 단계에 있으며 투명 래퍼와 관련하여 인터넷에 떠도는 많은 예제는 Vue.js 2 또는 Vue.js 3 RC 버전에 대한 것이므로 Vue의 최종 버전에서는 잘 작동하지 않습니다. js 3.

위에서 공유한 변형은 Vue.js 3를 사용하여 투명한 래퍼 패턴을 구현할 수 있는 방법 중 일부일 뿐이며, 이는 새 버전의 프레임워크가 얼마나 다재다능한지를 증명합니다.

다른 작업을 수행하는 경우 의견에 알려주십시오.

| 읽어 주셔서 감사합니다