Vue.js에서 v-model 모델 값을 옵션으로 만들기

Vue.js UI 라이브러리Inkline를 작성하는 동안 모델 값(v-model)을 제공하거나 제공하지 않고 일부 구성 요소가 작동하도록 하는 방법을 찾아야 했습니다. 일반적인 시나리오는 아니지만 라이브러리를 작성 중이고 DX(Developer Experience)에 대해 진지하게 생각하고 있다면 확실히 접하게 될 것입니다.
v-model 를 제공하지 않고 즉시 작동해야 하지만 v-model 를 제공하면 해당 상태를 완전히 제어할 수 있기 때문에 선택적으로 제어되는 구성 요소라고 합니다.

메뉴 예시

선택적 제어 구성 요소의 대표적인 예는 열거나(확장) 닫을(축소) 메뉴입니다. 구성 요소를 간단히 호출해 보겠습니다MyMenu .

개발자 경험의 관점에서 라이브러리 사용자가 <my-menu>를 코드에 드롭하고 열림 또는 닫힘 상태 처리에 대해 걱정할 필요 없이 접을 수 있는 콘텐츠를 즉시 추가할 수 있기를 원할 것입니다.

다음은 지원v-model이 없는 구성 요소의 모습입니다.

<template>
    <div class="my-menu">
        <button @click="toggleMenu">
            Menu
        </button>
        <menu v-show="open">
            <slot />
        </menu>
    </div>
</template>

<script>
export default {
    name: 'MyMenu',
    data() {
        return {
            open: false
        };
    },
    methods: {
        toggleMenu() {
            this.open = !this.open;
        }
    }
}
</script>

선택적 모델 값

여태까지는 그런대로 잘됐다. 다음 시나리오를 고려해 보겠습니다. 사용자가 다른 곳에서 메뉴를 열거나 닫을 수 있기를 원합니다. 이 시점에서 내부적으로 메뉴를 열고 닫을 수 있다는 것을 알고 있지만 라이브러리 사용자가 선택적으로 상태를 제어하도록 하려면 어떻게 해야 할까요?

내가 찾은 미래에 대비한 솔루션이 있어 많은 문제를 줄일 수 있습니다. 다음과 같습니다.

<template>
    <div class="my-menu">
        <button @click="toggleMenu">
            Menu
        </button>
        <menu v-show="open">
            <slot />
        </menu>
    </div>
</template>

<script>
export default {
    name: 'MyMenu',
    emits: [
        'update:modelValue'
    ],
    props: {
        modelValue: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            open: this.modelValue
        };
    },
    methods: {
        toggleMenu() {
            this.open = !this.open;
            this.$emit('update:modelValue', this.open);
        }
    },
    watch: {
        modelValue(value) {
            this.open = value;
        }
    }
}
</script>

라이브CodeSandbox에서 기본 예제를 사용해 보십시오.

Vue 3에서 modelValue 지원을 제공하기 위해 일반적인 v-model 소품을 추가했음을 위에서 볼 수 있지만 주로 세 가지 작업을 수행했습니다.

내부open 상태 속성의 초기 값을 v-model를 통해 제공된 값과 동일하게 설정하고 있습니다. v-model가 없으면 지정된 기본값false과 같기 때문에 이것은 놀라운 일입니다.

내부적으로 update:modelValue의 값을 변경할 때마다 this.open 이벤트를 내보냅니다

.

항상 내부open 값을 들어오는 외부modelValue 소품과 동기화되도록 보장하는 감시자를 추가했습니다.

결론

굉장하지 않나요? 개발자 경험을 잊지 않는 것이 중요합니다. 이와 같이 작은 것이 정확하고 일관되게 수행된다면 소중한 개발 시간을 절약할 수 있습니다.

오늘 흥미로운 것을 배웠기를 바랍니다. 선택적으로 제어되는 구성 요소 패턴이 어떻게 도움이 되었는지 듣고 싶습니다. 언제든지 연락해 주세요. 즐거운 코딩하세요!

추신 Inkline 3이 Vue 3 지원과 함께 제공된다는 소식을 들었습니까? 자세한 내용은 GitHub을 참조하십시오.