Vue3 양방향 바인딩 (v-model) 응용 간단 정리 | 컴포넌트간 바인딩, computed 활용, 다중 바인딩

컴포넌트간 양방향 바인딩 (v-model)

컴포넌트 간 v-model을 적용하려면 update:modelValue와 modelValue를 활용한다.

 

 

😉 v-model 기본 동작

<input
  :value="username"
  @input="username = $event.target.value"
/>

v-model의 기본 동작으로는 value를 바인딩하고,

@input 이벤트로 데이터를 변경하는 방법이다.

 

 

 <input v-model="username" />

이러한 동작은 v-model 로 간단하게 적용할 수 있다.

 

 

😉 컴포넌트간 v-model 기본 동작

<LabelInput
  :modelValue="username"
  @update:modelValue="newValue => username = newValue"
/>

위에 v-model의 기본 동작처럼 부모 컴포넌트에서 value로 데이터를 보내고, 

자식 컴포넌트에서 발생한 input 이벤트로 데이터를 받도록 하면 된다.

 

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

<script>
    export default {
        // props와 emits 정의
        props: ['modelValue', 'label'],
        emits: ['update:modelValue'],
    };
</script>

 

단, 이처럼 동작시키기 위해서는 자식 컴포넌트에서 props와 emits에 대한 정의가 필요하다

input이벤트가 발생하면 emit을 호출하여 데이터를 보내고 있다.

 

<LabelInput label="이름" v-model="username" />

마찬가지로 v-model로 간단하게 적용할 수 있다.

 

 

😉 computed 활용하여 v-model 구현

<template>
    <label>
        {{ label }}
        <input type="text" v-model="value" />
    </label>
</template>

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

    export default {
        props: ['modelValue', 'label'],
        emits: ['update:modelValue'],
        setup(props, context) {
            // value에 computed를 활용
            // get은 modelValue를 가져온다
            // set은 emit 호출하여 이벤트 발생.
            const value = computed({
                get() {
                    return props.modelValue;
                },
                set(value) {
                    context.emit('update:modelValue', value);
                },
            });
            return {
            	value,
            };
        },
    };
</script>

computed의 get과 set을 활용하여 v-model을 구현할 수 있습니다.

위 코드에서는 v-model에 연결된 value에 computed getter와  setter를 구현하여,

데이터를 가져올 땐 get을 통해 가져오며,

데이터가 변경되면 set에 의해 emit이 호출된다.

 

 

😉 v-model 전달인자

<BookComponent v-model:tay="taylog" />

 

기본적으로 v-model은 컴포넌트에서 modelValue props와 update:modelValue 이벤트를 사용한다.

하지만 전달 인자를 통해서 이름을 수정할 수 있다.

 

export default {
  props: ['tay'],
  emits: ['update:tay'],
};

자식 컴포넌트에서는 :title을 속성으로 정의, update:title를 이벤트로 내보내야 한다.

 

 

😉 다중 v-model 바인딩

<BookComponent
  v-model:tay="taylog"
  v-model:tube="taytube"
/>

export default {
  props: ['tay', 'tube'],
  emits: ['update:tay', 'update:tube'],
};

전달인자를 활용해서 다중 v-mdoel 바인딩도 가능하다