Vue.js] 14. Component > v-model, Fallthrough 속성

v-model을 컴포넌트에서 사용하여 양방향 바인딩을 구현할 수 있다. 

<CustomInput v-model="searchText" />

컴포넌트에 사용하면 다음과 같이 확장된다. 

<CustomInput
  :model-value="searchText"
  @update:model-value="newValue => searchText = newValue"
/>

이 기능이 작동하려면 CustomInput 컴포넌트에 두 가지 작업을 해야한다. 

1) 네이티브 <input> 앨리먼트의 value 속성을 modelValue 프로퍼티에 바인딩합니다.

2) 네이티브 input 이벤트가 트리거되면 새 값으로 update:modelValue 사용자 지정 이벤트를 내보냅니다.

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

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

또 다른 방법은 computed 프로퍼티를 사용하는 것이다. 

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>

 

v-model arguments

v-model은 컴포넌트에서 인수를 받을 수도 있다. 

<MyComponent v-model:title="bookTitle" />

 

Multiple v-model bindings

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>

 

v-model modifiers

 

속성 상속

fallthrough attribute는 컴포넌트에 전달되는 속성이지만 컴포넌트의 props 또는 emits에 선언되지 않은 속성이다. 예를들면 class, style, id 속성이 있다. 

 

컴포넌트가 single root element를 렌더링하면 fallthrough 속성이 root element의 속성으로 자동 추가된다. 

<!-- <MyButton>의 템플릿 -->
<button>클릭하기</button>
<!-- 부모 -->
<MyButton class="large" />
<!-- 최종 렌더링된 DOM -->
<button class="large">클릭하기</button>

 

자식 컴포넌트에 이미 class, style 속성이 있는 경우 상속된 class 또는 style 값과 병합된다. 

<!-- <MyButton>의 템플릿 -->
<button class="btn">클릭하기</button>
<!-- 최종 렌더링된 DOM -->
<button class="btn large">클릭하기</button>

 

v-on 이벤트 리스너에도 동일한 규칙이 적용된다. 

 

컴포넌트가 다른 컴포넌트를 root node로 렌더링하면 fallthrough속성이 다른 컴포넌트로 전달된다. 

 

속성 상속 비활성화

속성을 자동으로 상속받지 않도록 하려면, 컴포넌트 옵션에서 inheritAttrs: false를 설정하면 된다. 

fallthrough속성은 템플릿 표현식에서 $attrs 로 직접 접근할 수 있다. 

 

다중 Root Node에서 속성 상속

다중 루트 노드가 있는 컴포넌트에는 자동 속성 fallthrough동작이 없다. 

<CustomLayout id="custom-layout" @click="changeValue" />
<!-- CustomLayout -->
<header>...</header>
<main>...</main>
<footer>...</footer>

Vue가 fallthrough 속성을 적용할 위치를 확신할 수 없기 때문에 경고가 표시된다. 

$attr가 명시적으로 바인딩되면 경고가 표시되지 않는다.